React-Native开发之原生模块封装（Android） - 推酷
React-Native开发之原生模块封装（Android）
本文主题：如何实现原生代码的复用，即如何将原生模块封装。
有时候我们的应用需要进行访问原生平台系统的API接口，但是React Native可能还没有封装相应功能组件。还有可能我们需要 去复用一些原生java代码而不是让JavaScript重新去实现一遍。或者我们可能需要些一些更加高级的功能代码，所线程相关的。例如: 图片处理,数据库以及一些高级功能扩展之类的。 React Native平台的开发其实本身也是可以让你写纯原生代码并且还可以让你访问原生平台的功能。这是一个比较高级的功能不 过官方还是不推荐你在平时开发中使用这样的开发形式。但是如果你具备这样的开发能力，也是还是不错的。特别当在React Native 暂时未提供部分原生功能或者模块，那么你可以使用这样的方法进行封装扩展。今天我们就来看一下原生组件的封装扩展方法。
总体来说，就是当我们需要复用部分原生代码时，比如复用一个原生方法，此时就需要将原生方法进行封装，只暴露出一个接口
来 让React-Native调用。本博客以一个Toast消息来作用案例来讲解如何封装原生模块。
用Android Studio打开一个已经存在的RN项目，即用AS打开 项目文件夹/android/build.gradle文件。
在Android原生这边创建一个类继承ReactContextBaseJavaModule，这个类里边放我们需要被RN调用的方法，将其封装成一个原生模块。
在Android原生这边创建一个类实现接口ReactPackage包管理器，并把第二步创建的类加到原生模块（NativeModule）列表里。
将第三步创建的包管理器添加到ReactPackage列表里（getPackage方法里）
在RN中去调用原生模块，必须import&&& NativeModule模块。
首先大家肯定已经安装好了Android Studio，打开build.gradle文件之后，会发现其实连android/app文件夹也一并打开了。其中java文件夹中存放原生代码，也就是将我们要 复用的原生代码放进来。大家可以打开& 项目文件夹/android/app自行查看各级目录。在默认的包下，创建上边第二步和第三步所需的类。截图如下：
MyNativeModule.java代码如下：
package com.
import android.widget.T
import android.content.C
import com.facebook.react.bridge.ReactApplicationC
import com.facebook.react.bridge.ReactContextBaseJavaM
import com.facebook.react.bridge.ReactM
* Created by Administrator on .
public class MyNativeModule extends ReactContextBaseJavaModule {
private Context mC
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
mContext = reactC
public String getName() {
//返回的这个名字是必须的，在rn代码中需要这个名字来调用该类的方法。
return &MyNativeModule&;
//函数不能有返回值，因为被调用的原生代码是异步的，原生代码执行结束之后只能通过回调函数或者发送信息给rn那边。
@ReactMethod
public void rnCallNative(String msg){
Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
本类中存放我们要复用的原生方法，继承了ReactContextBaseJavaModule类，并且实现了其getName（）方法，构造方法也是必须的。按着Alt+Enter程序会自动提示。 接着定义了一个方法，该方法必须使用注解@ReactMethod标明，说明是RN要调用的方法。
MyReactPackage.java代码如下：
import com.facebook.react.ReactP
import com.facebook.react.bridge.JavaScriptM
import com.facebook.react.bridge.NativeM
import com.facebook.react.bridge.ReactApplicationC
import com.facebook.react.uimanager.ViewM
import java.util.ArrayL
import java.util.C
import java.util.L
* Created by Administrator on .
public class MyReactPackage implements ReactPackage {
public List&NativeModule& createNativeModules(ReactApplicationContext reactContext) {
List&NativeModule& modules=new ArrayList&&();
//将我们创建的类添加进原生模块列表中
modules.add(new MyNativeModule(reactContext));
public List&Class&? extends JavaScriptModule&& createJSModules() {
//返回值需要修改
return Collections.emptyList();
public List&ViewManager& createViewManagers(ReactApplicationContext reactContext) {
//返回值需要修改
return Collections.emptyList();
MainApplication.java代码如下：
package com.
import android.app.A
import android.util.L
import com.facebook.react.ReactA
import com.facebook.react.ReactInstanceM
import com.facebook.react.ReactNativeH
import com.facebook.react.ReactP
import com.facebook.react.shell.MainReactP
import java.util.A
import java.util.L
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
protected List&ReactPackage& getPackages() {
return Arrays.&ReactPackage&asList(
new MainReactPackage(),
//将我们创建的包管理器给添加进来
new MyReactPackage()
public ReactNativeHost getReactNativeHost() {
return mReactNativeH
MainActivity.java代码如下：
package com.
import com.facebook.react.ReactA
public class MainActivity extends ReactActivity {
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
protected String getMainComponentName() {
return &reactNative&;
接着我们需要编写index.android.js文件
代码如下：
* Sample React Native App
* /facebook/react-native
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
NativeModules,
} from 'react-native';
class reactNative extends Component {
render() {
&View style={styles.container}&
&Text style={styles.welcome}
onPress={this.call_button.bind(this)}
React Native 调用原生方法!
&Text style={styles.instructions}&
To get started, edit index.android.js
&Text style={styles.instructions}&
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
call_button(){
NativeModules.MyNativeModule.rnCallNative('调用原生方法的Demo');
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
AppRegistry.registerComponent('reactNative', () =& reactNative);
& 我们将一个文本框绑定了一个事件，首先import导入NativeModule，当点击文本时将会调用call_button（）方法。然后传入一个上下文对象，也就是一句话，通过调用原生方法rnCallNative( )方法来实现。
来分析一下程序运行流程：
（1）在配置文件AndroidManifest.xml中，android:name=&.MainApplication&，则MainApplication.java会执行。
（2）在MainApplication.java中，有我们创建的包管理器对象。程序加入MyReactPackage.java中。
（3）在MyReactPackage.java中，将我们自己创建的模块加入了原生模块列表中，程序进入MyNativeModule.java中。
（4）在MyNativeModule.java中，有我们需要被复用的原生方法rnCallNative( )。
程序运行结果如下所示，当点击第一行文本时，出现Toast消息。
如果对你有帮助，记得点赞哦~
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
将组件放入到一个数组里面，然后在渲染的时候，将数组作为参数。
render(){var pages =[];for (var i = 0; i & playList. i++) {pages.push(&Text key={i}&{playList[i]}&/Text&);}return(&View&{pages}&/View&);}
就是这个playList的数组如何写？新的组件在哪渲染的？ 求助各位大神。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
{pages.map((d)=&d)}
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App02:22:47 UTC
主要功能是可以对不同的画面对navbar都可以做自定义，push pop时带上了可跟随手势的切换效果。
用原有的NavigatorIOS组件做navigation虽然有原生的动画效果，但是想在bar上添加一些按钮就比较麻烦，于是将Navigator组件封装了一下。
有两个使用案例，不多说，进去看动画吧，欢迎拍砖4280人阅读
html5/ReactNative（92）
React Native出来一年多了，受到各大开发人员的喜爱，但是由于只是专注于View层的开发，因此在很多深层次上还需要结合原生app做一定的兼容，还有就是现在好多控件，如Android中已是系统的控件的sidemenu、checkbox、gridview等，这些在react native中 系统是没有给我们提供的，这时候就借助了第三方开源的力量。
那么我们今天说说在React Native项目开发中常见的一些第三方库。
常见的第三方库
CheckBox（多选按钮）
react-native-check-box CheckBox
基本用法：
onClick={()=&this.onClick(data)}
isChecked={data.checked}
leftText={leftText} /&;
当然我们也可以自定义样式，主要是对选中和未选中的样式做修改：
renderCheckBox(data) {
var leftText = data.
onClick={()=&this.onClick(data)}
isChecked={data.checked}
leftText={leftText}
checkedImage={&Image source={require('../../page/my/img/ic_check_box.png')} style={this.props.theme.styles.tabBarSelectedIcon}/&}
unCheckedImage={&Image source={require('../../page/my/img/ic_check_box_outline_blank.png')} style={this.props.theme.styles.tabBarSelectedIcon}/&}
RadioButton（单选按钮）
react-native-flexi-radio-button
使用也很简单，就是在中嵌套下就行：
onSelect = {(index, value) =& this.onSelect(index, value)}
value={'item1'} &
&This is item #1&
value={'item2'}&
&This is item #2&
value={'item3'}&
&This is item #3&
react-native-side-menu
menu={menu}&
splashscreen
react-native-splash-screen
使用也很简单，就是添加一个闪屏的xml
imagepicker
这个组件帮助我们选取图片和调用相机等，这个组件同时支持photo和video，也就是照片和视频都可以用这个组件实现。
import ImagePickerManager from ‘NativeModules‘;
var options = {
title: ‘Select Avatar‘, // 选择器的标题，可以设置为空来不显示标题
cancelButtonTitle: ‘Cancel‘,
takePhotoButtonTitle: ‘Take Photo...‘, // 调取摄像头的按钮，可以设置为空使用户不可选择拍照
chooseFromLibraryButtonTitle: ‘Choose from Library...‘, // 调取相册的按钮，可以设置为空使用户不可选择相册照片
customButtons: {
‘Choose Photo from Facebook‘: ‘fb‘, // [按钮文字] : [当选择这个按钮时返回的字符串]
mediaType: ‘photo‘, // ‘photo‘ or ‘video‘
videoQuality: ‘high‘, // ‘low‘, ‘medium‘, or ‘high‘
durationLimit: 10, // video recording max time in seconds
maxWidth: 100, // photos only默认为手机屏幕的宽，高与宽一样，为正方形照片
maxHeight: 100, // photos only
allowsEditing: false, // 当用户选择过照片之后是否允许再次编辑图片
ImagePickerManager.showImagePicker(options, (response) =& {
console.log(‘Response = ‘, response);
if (response.didCancel) {
console.log(‘User cancelled image picker‘);
else if (response.error) {
console.log(‘ImagePickerManager Error: ‘, response.error);
else if (response.customButton) {
// 这是当用户选择customButtons自定义的按钮时，才执行
console.log(‘User tapped custom button: ‘, response.customButton);
// You can display the image using either data:
if (Platform.OS === ‘android‘) {
source = {uri: response.uri, isStatic: true};
source = {
uri: response.uri.replace(‘file://‘, ‘‘),
isStatic: true
this.setState({
avatarSource: source
然后在页面展示的时候：
source={this.state.avatarSource} style={styles.uploadAvatar} /&
说到这里，我们要说一下另一个控件picker
picker-Android
Picker就是ReactNative界的Spinner,其常用的属性有：
onValueChange 这个方法在方法在选择Picker某一项时调用 可传两个参数 选择的value和position
selectedValue 这个属性是选择的值
enabled 设置是否可点击 Android属性
mode 设置样式 Android属性 dropdown下拉样式和dialog弹窗样式 默认是dialog
prompt 设置Picker标题 Android属性 并且只有是mode为dialog才会显示
itemStyle 设置每一项的样式 iOS属性
* Created by Administrator on .
import React, {Component} from 'react';
AppRegistry,
} from 'react-native';
class PickerG extends Component {
constructor(porp) {
super(porp);
this.state= {
selectedValue: ''
render() {
selectedValue={this.state.selectedValue}
onValueChange={(value)=&this.setState({selectedValue: value})}
prompt={'请选择'}
&Picker.Item label='Android' value='android'/&
&Picker.Item label='IOS' value='ios'/&
&Picker.Item label='ReactNative' value='reactnative'/&
module.exports = PickerG;
easy-toast
react-native-easy-toast
这个组件兼容了Android和iOS的toast,使用也很简单。
render() {
&View style={styles.container}&
&Toast ref="toast"/&
最后在需要调用的地方：
this.refs.toast.show('hello world!');
其他的第三方库
输入框表单验证
炫酷效果的 TextInput
图片选择器
iOS KeyChain管理
滚轮选择器
react-native-picker-Android Android 滚轮选择器
可刷新列表
可滚动标签
可滑动的底部或上部导航栏框架
底部或上部导航框架(不可滑动)
CheckBox多选
启动白屏问题
简易路由跳转框架
持久化存储
分类ListView
将 HTML 目录作为本地视图的控件，其风格可以定制
一款简单易用的 Toast 组件
漂亮的小组件
base组件库（各种封装不错的小组件）
不错的按钮：
输入框表单验证
炫酷效果的 TextInput
可滑动的日历组件
语言转化和一些常用格式转换
单选多选ListView
制作本地库
提示消息的Bar
iOS原生TableView
点击弹出视图
双平台兼容的ActionSheet
键盘遮挡问题
扫描二维码
ListView的优化
图片和base64互转
安卓 iOS 白屏解决
Text跑马灯效果
清除按钮的输入框
WebView相关
判断横竖屏
获取设备信息
手势放大缩小移动
下拉-上拉-刷新
图片加载进度条
毛玻璃效果
滑动选项卡
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1367697次
积分：20404
积分：20404
排名：第348名
原创：660篇
转载：267篇
译文：18篇
评论：279条
文章：12篇
阅读：61726
文章：18篇
阅读：35047
文章：27篇
阅读：76642
文章：28篇
阅读：76628
文章：73篇
阅读：163884
文章：25篇
阅读：31284
文章：24篇
阅读：39975
文章：14篇
阅读：33198
文章：22篇
阅读：61825
文章：95篇
阅读：216954
(11)(24)(20)(30)(19)(33)(68)(35)(30)(37)(50)(26)(49)(16)(34)(24)(18)(7)(23)(15)(7)(22)(16)(4)(15)(8)(11)(7)(8)(6)(16)(15)(7)(8)(7)(22)(23)(14)(26)(12)(20)(27)(58)(2)