React Native For Android学习之路-创建自定义原生模块

最新推荐文章于 2022-03-21 09:56:15 发布

山楂树之恋

最新推荐文章于 2022-03-21 09:56:15 发布

阅读量556

点赞数

分类专栏： react_native

react_native 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

http://www.jianshu.com/p/fb451435a425?nomobile=yes

React Native For Android学习之路-创建自定义原生模块

字数1162 阅读1477 评论2 喜欢4

前言

React Native一经推出就非常火爆，吸引了国内外的开发者的注意，好处不必多说，该文章以笔记的形式来记录自己的学习历程。
本文记录了基于官方文档来创建一个Android平台的自定义的原生模块(NativeModule)。

准备

需要提前准备好一个ReactNative项目，同时App与服务器端链接良好，可以正常"Reload JS"

关于本例

本例代码将实现一个Toast的Native(React官方已提供该模块)，借此来学习创建一个自定义NativeModule(原生组件)的方法。

效果图如下:

react_native_crate_native_module.png

编写模块

首先编写一个自定义模块的类，该类需要继承ReactContextBaseJavaModule, 并需要实现getName()方法返回一个模块名称，在本实例中，该自定义模块将实现Android的Toast功能，所以定义了一个show()方法，并加上了ReactMethod注解，这个注解可以将show(String msg, int duration)中的Java参数类型映射成Js中对应的数据类型，具体映射关系如下:

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

代码本身很简单，具体可以看注释

源代码

public class ToastAndroidModule extends ReactContextBaseJavaModule {

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

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

    /**
     * 定义模块名称
     * @return
     */
    @Override
    public String getName() {
        return "MyToastAndroid";
    }

    /**
     * 可以设置一些常量，能够在js层调用，本例中在JS代码中调用如"MyToastAndroid.LONG"
     * @return
     */
    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>(2);
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    /**
     * 自定义方法，通过ReactMethod注解可以把一些Java常量类型映射成js类型
     * @param msg
     * @param duration
     */
    @ReactMethod
    public void show(String msg, int duration) {
        Toast.makeText(getReactApplicationContext(), msg, duration).show();
    }
}

注册模块

在目前0.20版本上，我们自定义原生模块(NativeModule)是需要注册才能生效的，所以编写好模块之后需要重新打包安装到手机上。

编写Package

注册模块首先可以先写个自定义的Package，顾名思义，就是一个可以包含你自己写的模块的一个包，然后把包在MainActivity(本例中的类)中注册下，通过已有工程引入React组件的可以根据实际情况修改，也不难。
本例中新建一个MyPackage类，通过实现ReactPackage的三个接口来完成模块的绑定，其中createNativeModules方法是我们本例需要用到的，其他两个之后再说，要注意三个方法均不能返回null类型，不需要用到的请传入一个空集合！

源代码

public class MyPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>(1);
        // 将我们自定义模块添加一个集合中，这样React组件就会在合适的时机将我们引用的模块加载进去，这样后面才能愉快地玩耍~
        modules.add(new ToastAndroidModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        //现在不需要用到，不要传null，否则报错
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        //现在不需要用到，不要传null，否则报错
        return Collections.emptyList();
    }
}

注册Package

写好Package之后，就可以愉快将Package加入到MainActivity(本例)类里，方法很简单，直接贴部分源代码

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "AwesomeProject";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                //加入我们自己写的Package
                new MyPackage()
        );
    }
}

编译打包&安装到手机

由于我们修改了Android代码，因此需要重新编译打包，并安装到我们的手机中，此步骤省略。

编写JS

JS编写也清晰了然，可以直接查看源码。

源代码

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    NativeModules
} from 'react-native';

class AwesomeProject extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        var MyToastAndroid = NativeModules.MyToastAndroid;
        MyToastAndroid.show('This is from MyToastAndroid Native Module', MyToastAndroid.LONG)
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>
                    NativeModule Test by BogerChan
                </Text>
            </View>
        );
    }
};

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);