【React Native开发】React Native移植原生Android项目(4)

转载请标明出处：

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),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注个人微博，可以得到不少其它精彩内容