如何创建一个Android原生的react-native组件（一）

本人是android开发者，刚刚接触react-native不到一月，这是我的第一篇原创博客，从一开始照着React Native上文档的例子熟悉每一个控件的使用，到页面跳转，跳转到android原生Activity，再到自己实现一些简单的原生的android react-native组件，这是我上传到npm的两个组件（react-native-gotoactivity-android 和react-native-segmented-android），可以使用下面的命令下载

$ npm install react-native-segmented-android --save$ npm install react-native-gotoactivity-android --save

先说一下实现原理，如果是实现类似与Android的Toast与Dialog等一般继承ReactContextBaseJavaModule来实现，如果是ViewGroup类型（有子View）的，例如ScrollView等则继承ViewGroupManager，如果是View类型（无子View）例如Text，Image等则继承BaseViewManager 或者SimpleViewManager等。

我们以ToastAndroid为例子，来讲解如何创建原生android react-native组件，其实facebook官方团队已经实现了，这个比较简单，容易理解。其实我主要就是说明实现的步骤；如有错误，请大家多多反馈。希望与大家共同学习进步。

开始

Step 1 - 新建react-native工程 ReactNativeToastAndroid

$ react-native init ReactNativeToastAndroid

Step 2 - 将新建的工程导入android studio然后新建空library（以react-native-toast-android为library的名称）之所以要新建一个library而不在ReactNativeToastAndroid工程中写呢，主要是为了方便上传到npm及github上方便其他开发者使用，一般以react-native-xxx-android命名方便识别这是react-native组件。

Step 3 - 新建空library（以react-native-toast-android为library的名称）

在library目录下的build.gradle中添加react-native的依赖

// file: android/react-native-toast-android/build.gradle...dependencies {    ...    compile 'com.facebook.react:react-native:0.16.+' }

Step 4 - 继承ReactContextBaseJavaModule ，大家可以很明显的发现show（）方法上多了一个‘@ReactMethod’，加上了‘@ReactMethod’的方法可以被js调用。

public class AndroidToastModule extends ReactContextBaseJavaModule {    private static final String DURATION_SHORT_KEY = "SHORT";    private static final String DURATION_LONG_KEY = "LONG";    public AndroidToastModule(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return "ToastForAndroid";    }    @Override    public Map getConstants() {        final Map constants = MapBuilder.newHashMap();        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);        return constants;    }    @ReactMethod    public void show(String message, int duration) {        Toast.makeText(getReactApplicationContext(), message, duration).show();    }}

Step 5 - 继承ReactPackage，注意createNativeModules（）返回的是加入了 AndroidToastModule 的集合，createJSModules（）与createViewManagers（）返回的都是空集合，如果Step 4 步继承的是BaseViewManager或其子类，那么createViewManagers（）中返回的就是加入了BaseViewManager的集合，其他的就是空集合，一般情况createJSModules（）的返回值都是空集合。

public class AndroidToastPackage implements ReactPackage {    @Override    public List createNativeModules(ReactApplicationContext reactContext) {        return Arrays.asList(new AndroidToastModule(reactContext));    }    @Override    public List> createJSModules() {        return Collections.emptyList();    }    @Override    public List createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

Step 6 - 新建ToastForAndroid.js，文件位置

‘ android/react-native-toast-android/ToastForAndroid.js ’代码如下，然后在 ‘android/react-native-toast-android/’下运行如下命令生成package.json文件

$ npm init         //生成package.json文件

'use strict';var RCTToastAndroid = require('NativeModules').ToastForAndroid;var ToastForAndroid = {  SHORT: RCTToastAndroid.SHORT,  LONG: RCTToastAndroid.LONG,  show: function (    message: string,    duration: number  ): void {    RCTToastAndroid.show(message, duration);  },};module.exports = ToastForAndroid;

Step 7 - 复制ToastForAndroid.js 文件到‘/ReactNativeToastAndroid/ ’ 目录下，如下是index.android.js代码，然后运行测试

'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  Dimensions,  TouchableHighlight,  View,} = React;// var ToastForAndroid = require('react-native-toast-android');var ToastForAndroid = require('./ToastForAndroid');var deviceWidth = Dimensions.get('window').width;var deviceHeight = Dimensions.get('window').height;var ReactNativeSegmentedExample = React.createClass({   _onPressButton:function(){          ToastForAndroid.show('点击了！', ToastAndroid.SHORT)      });    },  render: function() {    return (      renderButton: function() {        return (          <TouchableHighlight onPress={this._onPressButton}>            <Text style={{width:deviceWidth,height:50}}>click goto activityText>          TouchableHighlight>        );      },    );  }});...

Step 9 - 测试成功，在目录‘ /android/react-native-toast-android/ ’下运行命令：

$ npm adduser   //增加npm用户$ npm publish  //上传react-naive-toast-android到npm上

Step 10 - 其他开发者使用你上传到npm上的组件方法(github上的模板)

Example

'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  Dimensions,  TouchableHighlight,  View,} = React;var ToastForAndroid = require('react-native-toast-android');// var ToastForAndroid = require('./ToastForAndroid');var deviceWidth = Dimensions.get('window').width;var deviceHeight = Dimensions.get('window').height;var ReactNativeSegmentedExample = React.createClass({   _onPressButton:function(){          ToastForAndroid.show('点击了！', ToastAndroid.SHORT)      });    },  render: function() {    return (      renderButton: function() {        return (          <TouchableHighlight onPress={this._onPressButton}>            <Text style={{width:deviceWidth,height:50}}>click goto activityText>          TouchableHighlight>        );      },    );  }});...

Install

Step 1 - Install the npm package

$ npm install react-native-toast-android --save

Step 2 - Update Gradle Settings

// file: android/settings.gradle...include ':react-native-toast-android', ':app'project(':react-native-toast-android').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-toast-android')

Step 3 - Update app Gradle Build

// file: android/app/build.gradle...dependencies {    ...    compile project(':react-native-toast-android')}

Step 4 - Register React Package

...import com.higo.zhangyp.toast.AndroidForToastPackage; // <-- importpublic class MainActivity extends FragmentActivity implements DefaultHardwareBackBtnHandler {    private ReactInstanceManager mReactInstanceManager;    private ReactRootView mReactRootView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mReactRootView = new ReactRootView(this);        mReactInstanceManager = ReactInstanceManager.builder()                .setApplication(getApplication())                .setBundleAssetName("index.android.bundle")                .setJSMainModuleName("index.android")                .addPackage(new MainReactPackage())                .addPackage(new AndroidForToastPackage()) // <-- Register package here                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);        setContentView(mReactRootView);    }...

我们以ToastAndroid为例子，来讲解如何创建原生android react-native组件，其实facebook官方团队已经实现了，这个比较简单，容易理解。其实我主要就是说明实现的步骤；如有错误，请大家多多反馈。希望与大家共同学习进步。

开始

Step 1 - 新建react-native工程 ReactNativeToastAndroid

Step 3 - 新建空library（以react-native-toast-android为library的名称）

Step 4 - 继承ReactContextBaseJavaModule ，大家可以很明显的发现show（）方法上多了一个‘@ReactMethod’，加上了‘@ReactMethod’的方法可以被js调用。

Step 6 - 新建ToastForAndroid.js，文件位置

Step 7 - 复制ToastForAndroid.js 文件到‘/ReactNativeToastAndroid/ ’ 目录下，如下是index.android.js代码，然后运行测试

Step 9 - 测试成功，在目录‘ /android/react-native-toast-android/ ’下运行命令：

Step 10 - 其他开发者使用你上传到npm上的组件方法(github上的模板)

Example

Install

Step 1 - Install the npm package

Step 2 - Update Gradle Settings

Step 3 - Update app Gradle Build

Step 4 - Register React Package

更多相关文章

随机推荐