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

转载请标明出处：

http://blog.****.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项目在该文件夹以下。详细例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

②.电脑必须安装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配置

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

以上三步所有完毕了，上面给我们创建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命令编译执行应用就能够了，执行结果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

这样就完毕了一个简单的Android原生项目移植到ReactNative中了。

(七)最后总结

今天移植Android原生项目移植到React Native中。期间也遇到了非常多问题，比如由于官网的文档没有保持最新，后来经过排查踩坑才发现。大家有问题能够加一下群React Native技术交流群(282693535)或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（http://blog.****.net/developer_jiangqq） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注我的微博，能够获得很多其它精彩内容