转载请标明出处:
http://blog.csdn.net/developer_jiangqq/article/details/50519677
本文出自:【江清清的博客】
(一)前言
【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org
前三节课程我们已经对于React Native For Android的环境搭建。IDE安装配置以及应用执行。调试相关的知识点做了解说。今天我们来讲一个非常实用的知识点。
移植我们已有的原生Android项目到React Native中。
刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
在React Native中React事实上很多其它关注的是视图View层。所以React Native本身也支持而且能够让我们非常easy方便的移植一个Android原生的项目到React Native中。
(二)前提准备工作
①.首先我们有一个採用Gradle构建的Android应用项目,这个大家直接採用Android Studio进行创建一个项目就可以。我这边新建一个文件夹TestHello。然后採用Android Studio创建一个android项目在该文件夹以下。详细例如以下:
②.电脑必须安装Node.js。详细安装用法(点击进入)
(三)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" />
该只用于开发阶段从开发server载入最细的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); } }
紧接着对于返回button键的事件我们也须要传递一下:
@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了。首先我们须要开启开发server。使用例如以下命令就可以:
npm start
执行结果例如以下:
接下来就是最后一步了,直接执行react-native run-android命令编译执行应用就能够了,执行结果例如以下:
这样就完毕了一个简单的Android原生项目移植到ReactNative中了。
(七)最后总结
今天移植Android原生项目移植到React Native中。期间也遇到了非常多问题,比如由于官网的文档没有保持最新,后来经过排查踩坑才发现。大家有问题能够加一下群React Native技术交流群(282693535)或者底下进行回复一下。
尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)
关注我的微博,能够获得很多其它精彩内容