《React-Native系列》38、 ReactNative混合组件封装

在我们做ReactNative项目的过程中，我们会发现由ReactNative提供给我们的组件或API往往满足不了我们的需求，常常需要我们自己去封装Native组件。
今天我们介绍下如果封装一个简单的ReactNative组件，Native代码采用Android。
需求：实现一个组件、实现类似Android的Toast功能。

1、创建一个RN project
react-native init HybridDemo如下：

$ react-native init HybridDemo
This will walk you through creating a new React Native project in /Users/birenjie/RN/projects/HybridDemo
Installing react-native package from npm...
Setting up new React Native app in /Users/birenjie/RN/projects/HybridDemo
HybridDemo@0.0.1 /Users/birenjie/RN/projects/HybridDemo
└── react@15.3.2

To run your app on iOS:
cd /Users/birenjie/RN/projects/HybridDemo
react-native run-ios
- or -
Open /Users/birenjie/RN/projects/HybridDemo/ios/HybridDemo.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd /Users/birenjie/RN/projects/HybridDemo
react-native run-android

2、使用Android Studio打开新建的项目HybridDemo，新建一个空Library
如何新建一个Android的空Library，参考：Android Studio中为项目新建及添加Library
在这里我新建了一个Libray  : rn-toast-android

3、修改rn-toast-android下的build.gradle, 在dependencies中添加compile 'com.facebook.react:react-native:0.20.+'
如下：

4、在Library中新建AndroidToastModule.java和AndroidToastPackage.java
AndroidToastModule.java代码如下：
package com.example.rn_toast_android;

import android.widget.Toast;

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

import java.util.Map;

/**
* Created by birenjie on 16/10/11.
*/
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<String, Object> getConstants() {
final Map<String, Object> 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();
}
}


AndroidToastPackage.java代码如下：package com.example.rn_toast_android;

import com.example.rn_toast_android.AndroidToastModule;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

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

/**
* Created by birenjie on 16/10/11.
*/
public class AndroidToastPackage implements ReactPackage {

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new AndroidToastModule(reactContext));
}

//一般情况createJSModules（）的返回值都是空集合。
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

//如果是BaseViewManager或其子类，那么createViewManagers（）中返回的就是加入了BaseViewManager的集合
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

5、生成package.json在....android/rn-toast-android/目录下 执行npm init 
会出现一系列的提示，按照提示完成，最后可以生成package.json 文件

6、测试我们编写的组件
在我们init的项目的根目录（index.android.js)同级目录，新建ToastForAndroid.js
ToastForAndroid.js源码如下：

'use strict';

import React, { Component } from 'react';
import {
NativeModules,
} from 'react-native';

const {ToastForAndroid} = NativeModules;

var ToastForAndroidDemo = {

SHORT: ToastForAndroid.SHORT,
LONG: ToastForAndroid.LONG,

show: function (
message: string,
duration: number
): void {
ToastForAndroid.show(message, duration);
},

};

module.exports = ToastForAndroidDemo;


修改index.android.js，如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

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

import ToastForAndroid from './ToastForAndroid';

var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;

class HybridDemo extends Component {
render() {
return (
<TouchableHighlight onPress= {()=>ToastForAndroid.show('I am clicked ', ToastForAndroid.LONG)}>
<Text style={{width:deviceWidth,height:50,backgroundColor:'red',textAlign:'center',textAlignVertical:'center'}}>点击调用Native方法</Text>
</TouchableHighlight>
);
}
}

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


我们需要修改的MainApplication.java，将AndroidToastPackage加入到ReactPackage
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),new AndroidToastPackage()
);
}

好，一切准备就绪，我们启动React packager Server。运行效果如下：

至此，我们自己封装的Android  Toast组件就完成了。

如果我们有npm的镜像服务器，我们还可以把我们的组件发布上去。
在..../android/rn-toast-android/ 目录下执行
$ npm adduser   //增加npm用户
$ npm publish  //上传组件到npm上

这样我们就可以像使用第三方组件一样，使用自己发布的ReactNative混合组件了。

参考：http://blog.csdn.net/zzyyppqq/article/details/50349905