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

背景：最近在学习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);
    }
}

 

接下来别忘记在 AndroidManifest.xml 中注册。

 

还有网络权限，一般项目都会有这个权限了。

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

还有个权限，官方文档和其他很多文章都没提到。就是悬浮窗权限，没有申请这个权限无法调出上图这个设置菜单的。

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

 

 

 

9、终于完工，在项目根目录输入如下命令：npmstart

关于 npm start 命令，该命令会执行package.json 文件中“ scripts ”下的“ start ”的值。

 

"scripts": {

   "start": "node node_modules/react-native/local-cli/cli.jsstart"

  }

看了下这个 cli.js 文件，最后执行的是 cliEntry.js 里面的脚本，一堆配置参数，最终就是在本地配置一个 web 服务器环境。

然后运行android应用，运行效果如下：

最后附上项目源码：RnAppDemo