React-Native集成到已有项目中的总结

1. 安装Python

   • 从官网下载并安装python 2.7.x（3.x版本不行）

2. 安装node.js

   • 从官网下载node.js的官方V6.X.X版本或更高版本。安装完成后检测是否安装成功：node -v
     安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。
     npm config set registry https://registry.npm.taobao.org --global
     npm config set disturl https://npm.taobao.org/dist --global

3. 安装react-native命令行工具

   • npm install -g react-native-cli
      安装完yarn后同理也要设置镜像源：

     yarn config set registry https://registry.npm.taobao.org --global
     yarn config set disturl https://npm.taobao.org/dist --global

4. 在Android Studio的欢迎界面中选择Configure | SDK Manager。

   • 以下为必选
     • 在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Android SDK Platform 23
     • 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

5. 配置ANDROID_HOME环境变量

   • 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
     打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，建议在系统变量中修改
     
     • PATH设置

       把Android SDK的tools和platform-tools目录添加到PATH变量中:

       PATH -> 双击进行编辑

       

6. 集成到已有的APP中

   1. 安装组件

      • 进入https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
        参照文档Prerequisites集成

        

        • 在Terminal中的app根目录或者通过开始菜单，运行命令行，定位到项目所在目录

        

        依次执行以下命令行：
        $ npm init
        $ npm install --save react react-native
        $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
        ps:

        1.npm init命令用来生成package.json文件。根据提示输入name(不能包含大写字母)，版本，描述，entry point（入口文件）等，可回车使用默认值。

        2.npm install --save react react-native命令要花费几分钟，当前版本默认安装react-native@0.xx.x

        也可以安装制定版本，如执行$ npm install --save react-native@0.42.0 此命令行将生成

        /node_modules 文件夹. 该文件夹用来存放项目中的avaScript 依赖

        安装完毕，按提示要求安装相应版本的react

        3.前面5个步骤完成后，当出现下面提示时，重启Android studio

        'npm' 不是内部或外部命令，也不是可运行的程序
        或批处理文件。

         

        

         

        $ npm install react@x.0.0-alpha.x

         

        

        此警告可忽略

         

        3.当出现下面提示，需安装curl，否则请跳过

        

        https://curl.haxx.se/dlwiz/?type=bin&os=Win64&flav=-&ver=*&cpu=x86_64下载v7.54.0

        windows 64位 的系统，可以使用I386下的curl.exe工具

        　在系统高级环境变量中，配置

        　　CURL_HOME ----- "你的curl目录位置curl-7.54.0"

        　　path ---- 末尾添加 “;%CURL_HOME%I386”

   2. js配置

      • 打开package.json 文件在 scripts中添加： 
        "start": "node node_modules/react-native/local-cli/cli.js start"
      • 在工作空间新建index.android.js文件，

      • 

        打开index.android.js文件，拷贝以下内容，测试“Hello, World”

         1 'use strict';
         2 
         3 import React from 'react';
         4 import {
         5   AppRegistry,
         6   StyleSheet,
         7   Text,
         8   View
         9 } from 'react-native';
        10 
        11 class HelloWorld extends React.Component {
        12   render() {
        13     return (
        14       <View style={styles.container}>
        15         <Text style={styles.hello}>Hello, World</Text>
        16       </View>
        17     )
        18   }
        19 }
        20 var styles = StyleSheet.create({
        21   container: {
        22     flex: 1,
        23     justifyContent: 'center',
        24   },
        25   hello: {
        26     fontSize: 20,
        27     textAlign: 'center',
        28     margin: 10,
        29   },
        30 });
        31 
        32 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
        
        

        第二个HelloWorld是展示的页面

        • 在app build.gradle文件dependencies 中添加

        1 dependencies {
        2     ...
        3     compile "com.facebook.react:react-native:0.xx.x" // From package.json.
        4 }

        • In your project's build.gradle中"allprojects" block:repositories下添加

        1 maven {
        2    // All of React Native (JS, Android binaries) is installed from npm
        3             url "$rootDir/../node_modules/react-native/android"
        4 }

        ps:/..此处官方英文文档是个坑，百度好久，用来设置node_modules的父目录，如果在根目录下直接删掉，如果你很执着，同步后，就会报错：
        “Failed to resolve: com.facebook.react:react-native:0.x.x"
        • 在主app清单文件中添加DevSettingsActivity和访问网络权限：
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
        <uses-permission android:name="android.permission.INTERNET"/>

   3. 添加js入口MyReactActivity

      app中页面跳转，内容如下：

      • public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
            private ReactRootView mReactRootView;
            private ReactInstanceManager mReactInstanceManager;
        
            @Override
            protected void 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)//true
                        .setInitialLifecycleState(LifecycleState.RESUMED)
                        .build();
                mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
        //"HelloWorld"需和index.android.js中方法 AppRegistry.registerComponent()第一个参数保持一致
                setContentView(mReactRootView);
            }
        
            @Override
            public void invokeDefaultOnBackPressed() {
                super.onBackPressed();
            }
        }

        清单文件中声明及相关主题设置：

      • <activity
          android:name=".MyReactActivity"
          android:label="@string/app_name"
          android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        </activity>

   4. 启动js服务器

      $ npm start

 

出现下面提示后

 

终于可以运行了···结果屏幕红了， 报错行：

com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly

• • 
  • 原因：没有找到执行的bundle文件。
    两种解决方式：

1. 修改项目中的package.json文件

   1. • 在scripts模块，添加bundle-android,如图 

        

        1 "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/.../src/main/assets/index.android.bundle --assets-dest android/.../src/main/res/"

        ps:/...为你的app,“--”为两个“-”
2. 使用命令行直接生成

不用修改package.json，不管有没有bundle-android模块

在Terminal窗口直接执行下面命令：

"react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output .../src/main/assets/index.android.bundle --assets-dest .../src/main/res/"

当出现下面提示后，说明ok

assets下生成两个文件：

 

摇晃设备，reload js,是不是就大功告成了?结果屏幕继续飘红：

 

com.facebook.react.devsupport.DebugServerException: Could not connect to development server.

 

解决办法：点击Reload(R,R),打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。

 

终于出现“Hello, World”页面了。汗啊，费了好大劲···

 

 　　　　本文为博主原创文章，请尊重版权，未经博主允许不得转载，转载请注明出处：http://www.cnblogs.com/details-666/p/RN.html

附：查询电脑ip地址命令：ipconfig/all

连接网线时，采用

 

连接wifi时，采用

 

 

补充：

Q:Caused by: java.lang.IllegalAccessError: tried to access method android.support.v4.net.ConnectivityManagerCompat.:(Lcom/facebook/react/bridge/ReactApplicationContext;)V from class com.facebook.react.modules.netinfo.NetInfoModule

A:将项目的appcompat的版本改成23.0.1就好了

compile 'com.android.support:appcompat-v7:23.0.1'

 

安装老版导航命令

npm install react-native-tab-navigator --save

安装最新导航组件

npm install --save react-navigation

 

如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

问题先总结到这里，发现问题继续补充。