React Native移植原生Android项目

系统学习React Native的同学请参考 官方文档。

本文同样基于江青系列文章学习进行学习，遇到的问题和大家分享。难道说Windows就是比Mac问题多吗？

React Native开发IDE安装参照 这里
1. Atom的安装，编辑器
2. Nuclide的安装，Fackbook专门为React开发IDE

补充俩个命令：
apm 命令属于Atom，进行环境变量的配置C:\Users\administrator\AppData\Local\atom\bin目录下。

curl没有接触过，需要下载，详细步骤参考 这里，文中给出的下载地址有偏差请用这个 链接 滑到页面最底部选择 curl-7.33.0-win64-ssl-sspi.zip 。但是curl对windows尝试了一下是无效的，运行之后数据全为0。

移植Android项目步骤：

1-准备安卓项目

1.新建一个文件夹作为本次RN项目的工程根目录，例如TestHello文件夹。 然后使用AndroidStudio创建一个项目，例如项目名为android，将安卓项目放在RN工程目录下，目录结构为TestHello -> android。此时要注意TestHello才是你整个RN项目的根目录，并非像AndroidStudio那样android
为根目录，可以理解为android和ios相当于TestHello的俩个module而已。

2-Android项目配置

1.在Android项目的build.gradle中添加React Native依赖，react-native最好是facebook最新的版本

    compile 'com.facebook.react:react-native:0.20.1'

2.在Android项目清单文件AndroidManifest.xml中添加网络权限，目前刚接触不是太理解，说正式发布版本中可以将网络权限删除，仅仅是开发阶段从开发服务器加载最细的JavaScript代码。

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

3.在Android项目的MainActivity中，配置相关的代码进行启动ReactNative库，名字“testhello”和项目名称保持一致。在getUseDeveloperSupport()方法中，原文返回的值是BuildConfig.DEBUG，但是测试的时候会出现问题，所以这里写死为true；

public class MainActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        return "testhello";    }    @Override    protected boolean getUseDeveloperSupport() {        return true;    }    @Override    protected List<ReactPackage> getPackages() {        return Arrays.<ReactPackage>asList(new MainReactPackage());    }}

3-RN相关配置

1.切换到RN工程的根目录，命令行运行npm init，需要写名称，最好和工程名保持一致，必须全小写，其他可不填，一路回车。

完成之后，会生成package.json的文件，此时你的RN工程目录下有俩个文件，如下图，其实做之前可以查看一下完整的RN工程目录下的文件，进行整体的把握和对比

2.打开package.json文件，进行如下俩个更改,1是scripts代码块"start": "node node_modules/react-native/local-cli/cli.js start",另一个是添加dependencies依赖，查看本地react和react-native版本使用命令行npm info react和npm info react-native进行查看，需等待一会，然后查找version的字段信息即可。

{  "name": "testhello",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "start": "node node_modules/react-native/local-cli/cli.js start"  },  "author": "",  "license": "ISC",  "dependencies": {    "react": "15.4.2",    "react-native": "^0.42.0"  }}

3.在RN项目的根目录下执行命令行npm install进行node-modules模块的安装。请耐心等待
4.进行flow配置， 将网址 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 的内容复制到你项目.flowconfig文件下，位置在RN项目根目录TestHello\node_modules\react-native.flowconfig
采用curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 命令的方式在windows上没有效果，数据都为0.

5.创建文件名为index.android.js文件，添加如下代码，这里名字为testhello和之前的名称保持一致。

'use strict';import React from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class MyFirstRNApp extends React.Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.hello}>Hello, World!</Text>      </View>    )  }}var styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },        hello: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },});AppRegistry.registerComponent('testhello', () => MyFirstRNApp);

4-运行App

1.在RN项目的根目录下执行命令行：npm start
2.在RN项目的根目录下执行命令行：react-native run-android

5-问题总结

1.so库问题解决方案

在Android项目的build.gradle文件下做如下代码修改：

defaultConfig {       applicationId "com.example.android"       minSdkVersion 16       targetSdkVersion 25       versionCode 1       versionName "1.0"       ndk {           abiFilters "armeabi-v7a", "x86"       }   }

2.v4包问题解决方案

在Android项目的build.gradle文件下做如下代码修改：

dependencies {    compile fileTree(include: ['*.jar'], dir: 'libs')    testCompile 'junit:junit:4.12'    compile 'com.android.support:appcompat-v7:23.0.1'    compile 'com.facebook.react:react-native:0.20.1'}

3.undefied not a function问题解决方案

![这里写图片描述](http://img.blog.csdn.net/20170301180925390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWlzYTky/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

在当前项目目录下，例如 TestHello\node_modules\react-native\Libraries\Utilities\UIManager.js 将以下代码贴到原有的代码最下方即可。

if (!UIManager.setChildren) {  /**   * Index cache (used by setChildren())   */  UIManager._cachedIndexArray = function(size) {    var cachedResult = this._cachedIndexArray._cache[size];    if (!cachedResult) {      var arr = [];      for (var i = 0; i < size; i++) {        arr[i] = i;      }      this._cachedIndexArray._cache[size] = arr;      return arr;    } else {      return cachedResult;    }  };  UIManager._cachedIndexArray._cache = {};  /**   * Fallback setChildren() implementation for Android   */  UIManager.setChildren = function(containerTag, createdTags) {    var indexes = this._cachedIndexArray(createdTags.length);    UIManager.manageChildren(containerTag, null, null, createdTags, indexes, null);  };}

4.JSException，Can’t find variable问题解决方案

将android项目下的getUseDeveloperSupport()方法改为如下：

   @Override   protected boolean getUseDeveloperSupport() {       return true;   }