react-native调用安卓代码-高级应用

react-native调用安卓代码

第一步

写一个类来封装要调用的方法

package com.rndemo;

import android.content.Intent;
import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.HashMap;
import java.util.Map;

/**
 * 描述：
 * <p>
 * 作者： 向金海
 * 时间： 2017/11/3 14:53
 */

public class ToastModule extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }


    /**
     *  在rn中使用的组件名  如：
     *   import { NativeModules } from 'react-native';
     *   export default NativeModules.ToastExample;
     */
    @Override
    public String getName() {
        return "ToastExample";
    }

    /**
     *  给js使用的常量 如：
     *  import Toast from './js/ToastExample';
     *  
     *  Toast.show('哈哈哈',Toast.SHORT)
     */
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    /**
     * 给到js调用的方法
     * @param message 参数
     * @param duration 参数
     */
    @ReactMethod
    public void show(String message, int duration) {
        /*
         * 在方法里面可以实现各种安卓原生的东西，如跳转界面，打开图片选择器
         */

        Toast.makeText(getReactApplicationContext(), message, duration).show();

        Intent intent = new Intent(getReactApplicationContext(),AboutActivity.class);
        getReactApplicationContext().startActivity(intent);
    }

}

第二步

将模块注册

package com.rndemo;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * 描述：将新加模块注册
 * <p>
 * 作者： 向金海
 * 时间： 2017/11/3 14:56
 */

public class AnExampleReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new ToastModule(reactContext));

        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

第三步

添加到application中

package com.rndemo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new AnExampleReactPackage() // 将新加的包添加到这里
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

在rn中调用

获取到对应的组件

'use strict';

import { NativeModules } from 'react-native';

// 下一句中的ToastExample即对应上文
// public String getName()中返回的字符串

export default NativeModules.ToastExample;

在相应的地方调用

import Toast from './js/ToastExample';
Toast.show('哈哈哈',Toast.SHORT)

提个小小的坑
点击事件一定要这样写，不然会一进来就执行，然后没点击作用了##初学js

onPress={()=>Toast.show('哈哈哈',Toast.SHORT)}

高级应用

有时我们需要使用java或安卓的代码处理业务然后返回给rn，我们可以这样做

    // 在安卓接收方法  这里演示的是解密接口数据，然后通过Promise回调回去
    @ReactMethod
    public void decodingResult(String raw, String url, final Promise promise) {

        Log.e("HHH", "decodingResult: " + raw + url );
        String resTmp = DESUtil.decryptDES(raw, SHAPassWord.SHA1(url.substring(url.lastIndexOf("/") + 1)).substring(0, 8));

        Log.e("HHH", "decodingResult: " + resTmp );
        promise.resolve(resTmp);
    }

Promise 有几个方法回调其中resolve是成功的回调

// rn端调用此方法
Decode.decodingResult(responseText, url)
                .then((msg) => {
                    console.log('response data : ',msg);
                    callback(JSON.parse(msg));
                })
                .catch((err) => {
                    console.log('--------------error-----------------');
                    alert(err);
                });