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

　　在我们做ReactNative项目的过程中，我们会发现由ReactNative提供给我们的组件或API往往满足不了我们的需求，常常需要我们自己去封装Native组件。
　　
　　今天我们介绍下如果封装一个简单的ReactNative组件，Native代码采用Android。
　　
　　需求：实现一个组件、实现类似Android的Toast功能。
　　
　　1、创建一个RN project
　　
　　[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
　　
　　react-native init HybridDemo
　　
　　如下：
　　
　　[html] view plain copy 在CODE上查看代码片派生到我的代码片
　　
　　$ 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/www.lxinyul.cc 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代码如下：
　　
　　[java] view plain copy 在CODE上查看代码片派生到我的代码片
　　
　　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(www.hsl85.cn/ 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代码如下：
　　
　　[java] view plain copy 在CODE上查看代码片派生到我的代码片
　　
　　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或其子类，那么createViewwww.zhenlyule.cn/ Managers（）中返回的就是加入了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源码如下：
　　
　　[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
　　
　　'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, www.ycyc66.cn/ duration);
　　
　　},
　　
　　};
　　
　　module.exports = ToastForAndroidDemo;
　　
　　修改index.android.js，如下：
　　
　　[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
　　
　　/**
　　
　　* 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 = www.zhenloyl88.cn 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
　　
　　[java] view plain copy 在CODE上查看代码片派生到我的代码片
　　
　　@Override
　　
　　protected List<ReactPackage> www.wx1677.com/ getPackages() {
　　
　　return Arrays.<ReactPackage>asList(
　　
　　new MainReactPackage(),new AndroidToastPackage()
　　
　　);
　　
　　}
　　
　　好，一切准备就绪，我们启动React packager Server。
　　
　　运行效果如下：
　　
　　至此，我们自己封装的Android Toast组件就完成了。
　　
　　如果我们有npm的镜像服务器，我们还可以把我们的组件发布上去。
　　
　　在..../android/rn-toast-androi www.yghrcp88.cn d/ 目录下执行
　　
　　$ npm adduser //增加npm用户
　　
　　$ npm publish //上传组件到npm上
　　
　　这样我们就可以像使用第三方组件一样，使用自己发布的ReactNative混合组件了。