基于windows系统上搭建的android应用集成React native的成功案列

本文链接：https://blog.csdn.net/daxue2012/article/details/71860199

背景：最近在学习React Native，第一次尝试将React Native 集成到android项目，特此记录分享；本机nodejs版本为：v7.10.0，npm版本为：4.0.3。

1、在Android Studio IDE上面创建一个Android 应用（RnAppDemo），这个不是本文重点，假设已经创建成功。

2、进入AS IDE，打开创建好的Android项目，点击左下角的终端（Terminal），如下图：

3、输入命令：npm init,按照提示输入相关信息，即可完成 package.json文件的创建。

接下来，将package.json 文件中 scripts 字段下添加下面这句，同时也可以将“test”:"no" 这句删去。下面这句的作用应该是配置"start" 命令的路径的。

"start": "nodenode_modules/react-native/local-cli/cli.js start"

4、在终端执行npm install--save react react-native 命令

用于初始化 React 和 React Native 相关文件，安装完成后会在项目的根目录下看到 node_modules 文件夹。

执行完成结果展示如图：

5、创建.flowconfig文件

需要在项目根目录下生成一个.flowconfig文件。

curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。由于 Mac OS 是基于Unix 内核，所以 Mac 在网络畅通的情况下，这条命令很愉快的就执行完毕了，而后会在你项目根目录下生成一个 .flowconfig 文件。在 Windows 上你会绝望的看到命令行窗口显示 “ ' curl' 不是内部或外部命令，也不是可运行的程序或批处理文件" 的提示。你可以按照《 Windows 下安装使用 curl 命令》教程去使用该命令，也可以直接在项目的根目录下新建个 .flowconfig 文件，再将https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 的内容复制到该文件中。方便网络不畅的同学，已将该网页配置信息复制在下面（该配置信息随时会更新，建议还是到网站获取实时配置信息）。

[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore templates for 'react-native init'
.*/local-cli/templates/.*

; Ignore the website subdir
<PROJECT_ROOT>/website/.*

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in theroot
.*/Libraries/react-native/React.js
.*/Libraries/react-native/ReactNative.js

[include]

[libs]
Libraries/react-native/react-native-interface.js
flow/

[options]
emoji=true

module.system=haste

experimental.strict_type_args=true

munge_underscores=true

module.name_mapper='^[./a-zA-Z0-9$_-]+\.$bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf$$'-> 'RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe

suppress_comment=\$.\\|\n\$*\\$FlowFixMe\$$\\|[^(]\\|(\\(>=0\\.\\(4[0-6]\\|[1-3][0-9]\\|[0-9]\$.[0-9]\\)?*\$site=[a-z,_]*react_native_oss[a-z,_]*\$?)\\)
suppress_comment=\$.\\|\n\$*\\$FlowIssue\$(\\(>=0\\.\\(4[0-6]\\|[1-3][0-9]\\|[0-9]\$.[0-9]\\)?*\$site=[a-z,_]*react_native_oss[a-z,_]*\$?)\\)?:? #[0-9]+
suppress_comment=\$.\\|\n\$*\\$FlowFixedInNextDeploy
suppress_comment=\$.\\|\n\$*\\$FlowExpectedError

unsafe.enable_getters_and_setters=true

[version]
^0.46.0

6、添加 index.android.js文件到项目根目录

在根目录下新建index.android.js文件，复制下面这段内容进去即可。

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ItWindRN 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',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('ItWindRN', () => ItWindRN);

7、补充项目的相关配置

（1）module 级别的 build.gradle 配置修改

在你 app 文件夹下的 build.gradle 文件（module级别的gradle）添加 React Native 的依赖。

dependencies {

compile "com.facebook.react:react-native:+" // Fromnode_modules.

}

这里的 "+" 号表示跟随最新的 React Native 版本，也可以指定具体的版本号。

（2）project 级别的 build.gradle 配置修改

在你项目根目录的 build.gradle 文件（project级别的gradle）添加

allprojects {

repositories {

jcenter()

maven {

// All of React Native (JS,Android binaries) is installed from npm

url "$rootDir/node_modules/react-native/android"

}

这里要注意的是在 allprojects 节点下添加。这是因为Android项目默认的依赖包的源 jcenter() 并不包含最新版的 React Native（它只到0.20.1）。新版的 React Native 都只在 npm 里发布，因此你需要增加一下依赖包的源。在编译完后，检查 External Libraries 的 react-native 版本，若为 0.20.1 则说明 maven 的依赖源没有添加成功。可以更改 url 路径为 "$rootDir/node_modules/react-native/android" 试试。目前获取到的最新版本应该是0.44.0。

8、添加原生代码

（1）MyReactActivity.java

package com.itwind.android.rn.rnappdemo;

import com.facebook.react.ReactActivity;

import javax.annotation.Nullable;

/**
 * Created by oscar on 2017/5/13.
 */

public class MyReactActivity extends ReactActivity {

    @Nullable
    @Override
    protected String getMainComponentName() {

        return "ItWindRN";
    }
}

（2）MainApplication.java

package com.itwind.android.rn.rnappdemo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

/**
 * Created by oscar on 2017/5/13.
 */

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this,false);
    }
}