#
#
转载请标明出处：
[http://blog.csdn.net/developer_jiangqq/article/details/50519677](http://blog.csdn.net/developer_jiangqq/article/details/50519677)
本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq)
# (一)前言
【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:[http://www.lcode.org](http://www.lcode.org/)
前三节课程我们已经对于React Native For Android的环境搭建，IDE安装配置以及应用运行，调试相关的知识点做了讲解。今天我们来讲一个非常有用的知识点。移植我们已有的原生Android项目到React Native中。
刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
在React Native中React其实更多关注的是视图View层。所以React Native本身也支持并且可以让我们非常简单方便的移植一个Android原生的项目到React Native中。
# (二)前提准备工作
①.首先我们有一个采用Gradle构建的Android应用项目，这个大家直接采用Android Studio进行创建一个项目即可。我这边新建一个目录TestHello，然后采用Android Studio创建一个android项目在该文件夹下面。具体如下:
②.电脑必须安装Node.js，具体安装使用方法([点击进入](http://blog.csdn.net/developer_jiangqq/article/details/50456967))
# (三)Android项目相关配置
2.1 在我们Android项目的build.gradle中添加React Native依赖，然后同步，具体代码如下:
~~~
compile 'com.facebook.react:react-native:0.17.+'
~~~
[注意].该会同步0.17版本以上的react native，官方的版本还是停留在0.13没有更新，我本地的reactnative是0.17版本的，所以大家这边配置一定要跟自己本地的版本保持一致或者更新。关于这个问题今天我下午研究了一下去，踩了很多坑啊~~ 不过ReactNative中文网那边我已经让站长更新了版本。
2.2紧接着我们需要在项目AndroidManifest.xml中加入网络访问权限
~~~
<uses-permission android:name="android.permission.INTERNET" />
~~~
该仅仅用于开发阶段从开发服务器加载最细的JavaScript代码，在正式发布版本中，如果有需要可以把该网络权限删掉。
# (四)添加原生代码
在Android项目的MainActivity中，我们需要配置相关代码来进行启动运行React Native库。我们需要创建ReactRootView，然后在里边渲染React引用，并且设置成Activity的主视图即可。
具体代码如下:
~~~
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
privateReactRootView mReactRootView;
privateReactInstanceManager mReactInstanceManager;
@Override
protectedvoid 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())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "TestHello",null);
setContentView(mReactRootView);
}
@Override
publicvoid invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
~~~
注意以下的代码:
~~~
mReactRootView.startReactApplication(mReactInstanceManager,"TestHello", null);
~~~
以上其中方法第二种个参数我这边采用TestHello来进行命名了，注意这个要和后面讲到的东西进行统一，具体我们继续往下看。
在React Native中，其实FB给我们提供了ReactInstanceManger来替我们管理Activity相关的生命周期，所以我们需要传递一些Actitivty相关的生命周期到ReactInstanceManger中。具体代码onPause()和onResume()方法如下:
~~~
@Override
protectedvoid onPause() {
super.onPause();
if(mReactInstanceManager != null) {
mReactInstanceManager.onPause();
}
}
@Override
protectedvoid onResume() {
super.onResume();
if(mReactInstanceManager != null) {
mReactInstanceManager.onResume(this,this);
}
}
~~~
紧接着对于返回按钮键的事件我们也需要传递一下：
~~~
@Override
public void onBackPressed() {
if(mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
~~~
这样我们就可以当用户按下返回键的时候，javaScript代码可以做相关处理。当然如果前端不处理响应的事件，那么会回调到上面的invokeDefaultOnBackPressed()方法中。继而回退事件转移到Activity了，下面就是Activity该怎么样执行，就怎么样执行了。默认事件就是关闭Activity了
最后一步就是需要处理一下设备菜单了，默认情况下我们可以摇晃一下手机来弹出菜单，但是对于模拟器，该方法就不适用了，所以我们才拦截事件方法进行相关处理一下即可。
~~~
@Override
public boolean onKeyUp(int keyCode, KeyEvent event){
if(keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
~~~
到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。
# (五)添加js
下面我们采用命令行，首先切换到项目的根目录上面(我的例子是切换到TestHello目录下)
5.1.命令行运行npm init 运行截图如下:
该命令会创建一个package.json文件，并且提示我们输入一些信息，默认不输入即可，不过name必须要为全英文小写哦，具体结果执行结果如下:
5.2.命令行运行npm install --save react-native 进行安装react native模块以及相关node模块，运行截图如下:
这里开始安装node模块以及react native模块，具体运行结果会生成node_module文件夹如下：
5.3.最后运行如下命令即可:
~~~
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
~~~
做一下flow配置
以上三步全部完成了，上面给我们创建node模块，然后添加了react-native npm依赖。接下来我们需要修改package.json文件，在scripts标签那边添加如下代码:
~~~
"start":"node_modules/react-native/packager/packager.sh"
~~~
具体修改截图如下:
5.4.现在我们创建一下文件命名为:index.android.js，然后在里边添加如下代码:
~~~
'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
class MyAwesomeApp extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}
var styles = React.StyleSheet.create({
container:{
flex: 1,
justifyContent:'center',
},
hello: {
fontSize:20,
textAlign: 'center',
margin:10,
},
});
React.AppRegistry.registerComponent('TestHello', ()=> TestHello);
~~~
以上就完成了所有的相关代码以及react-native配置了，注意上面的都采用TestHello了，希望大家都用一样的名字和前面MainActivity进行统一哦。
# (六)运行APP
上面的配置步骤全部完成了，下面我们要运行APP了，首先我们需要开启开发服务器，使用如下命令即可:
~~~
npm start
~~~
运行结果如下:
接下来就是最后一步了，直接运行react-native run-android命令编译运行应用就可以了，运行结果如下:
这样就完成了一个简单的Android原生项目移植到ReactNative中了。
# (七)最后总结
今天移植Android原生项目移植到React Native中，期间也遇到了很多问题，例如因为官网的文档没有保持最新，后来经过排查踩坑才发现。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。
尊重原创，转载请注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
[
](http://weibo.com/u/1855428195?s=6uyXnP)
- 前言
- React Native For Android环境配置以及第一个实例(1)
- React Native开发IDE安装及配置(2)
- React Native应用设备运行(Running)以及调试(Debugging)(3)
- React Native移植原生Android项目(4)
- React Native进行签名打包成Apk(5)
- React Native库版本升级(Upgrading)与降级讲解(6)
- React Native控件之View视图讲解(7)
- React Native配置运行官方例子-初学者的福音(8)
- React Native控件之Text组件讲解(9)
- React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- TextInput组件讲解与QQ登录界面实现(11)
- ProgressBarAndroid进度条讲解(12)
- DrawerLayoutAndroid抽屉导航切换组件讲解(13)
- ScrollView组件讲解(14)
- ToolbarAndroid工具栏控件讲解以及使用(15)
- Switch开关与Picker选择器组件讲解以及使用(16)
- ViewPagerAndroid讲解以及美团首页顶部效果实例(17)
- Touchable*系列组件详解(18)
- React Native专题文章讲解,不断更新中.....
- ListView组件讲解以及最齐全实例(19)
- 超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)
- React Native超棒的LayoutAnimation(布局动画)
- PullToRefreshViewAndroid下拉刷新组件讲解(20)
- RefreshControl组件详解(21)
- WebView组件详解以及实例使用(22)