ReactNative学习——调用原生模块

ReactNative调用原生模块主要步骤：

1、原生代码部分，需要被RN调用的原生模块的类，需要继承ReactContextBaseJavaModule

2、原生代码部分，需要被RN调用的方法，必须添加@ReactMethod注解

3、原生代码部分，通过实现ReactPackage接口对原生模块进行注册，只有注册了这个模块，才能在RN中通过调用

4、原生代码部分，把实现了ReactPackage接口的类，添加到Application

5、RN代码部分，新建一个js文件，添加导包

6、RN代码部分，完成了上面的部分，调用原生模块就可以直接使用了

看着好像挺麻烦的，实际编码实现也不会很复杂

以调用原生Dialog为例

1、原生模块继承ReactContextBaseJavaModule类

public class DialogUtils extends ReactContextBaseJavaModule {

        private static final String DURATION_SHORT_KEY = "SHORT";
        private static final String DURATION_LONG_KEY = "LONG";
    
        public DialogUtils(ReactApplicationContext reactContext) {
            super(reactContext);
        }
    
        @Override
        public String getName() {
            return "Dialog";
        }
    
        @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;
        }

    
        /**
         * 这是暴露个ReactNative调用的方法
         * @param title dialog标题
         * @param content dialog内容
         * @param leftText dialog左边按钮文字
         * @param rightText dialog右边按钮文字
         */
        @ReactMethod
        public void showDialog(String title,String content,String leftText,String rightText) {
            new AlertDialog.Builder(getCurrentActivity()).setTitle(title).setMessage(content).setNegativeButton(leftText, new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                }
            }).setPositiveButton(rightText, new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    Toast.makeText(getReactApplicationContext(), "确定", Toast.LENGTH_SHORT).show();
                }
            }).show();
        }
}

2、注册原生模块，创建一个类，实现ReactPackage接口

public class TestReactPackage implements ReactPackage {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
    
            modules.add(new DialogUtils(reactContext));
    
            return modules;
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
}

3、把实现了ReactPackage接口的类，添加到Application

getPackages方法中，new TestReact[ackage就是把注册了原生模块的类
public class ReactNativeApplication 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 TestReactPackage()//这是刚刚注册原生模块的类
                );
            }
        };
    
        @Override
        public ReactNativeHost getReactNativeHost() {
            return mReactNativeHost;
        }
    
        @Override
        public void onCreate() {
            super.onCreate();
            SoLoader.init(this, /* native exopackage */ false);
        }
}

4、RN代码部分，新建一个js文件，添加下面的导入代码

import { NativeModules } from 'react-native';

// 下面的Dialog对应public String getName()中返回的字符串
export default NativeModules.Dialog;

5、RN中使用，最终的效果就是开头图片中的样式

import React, {Component} from 'react';
import Dialog from './DialogUtils';
import {View, Button} from 'react-native';

class CallNativeDemoActivity extends Component{
    render() {
        return (
            <Button onPress={this.callNative} title="调用原生模块" />
        );
    }

    callNative(){
        //调用原生的Dialog
        Dialog.showDialog("温馨提示","这是RN调用原生的Dialog","取消","确定");
    }
}

export default CallNativeDemoActivity

最后编辑于：2017.12.10 05:52:46