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);                });