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

时间：2022-01-13 18:30:43

  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的路径。
      打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，建议在系统变量中修改
      React-Native集成到已有项目中的总结
      • PATH设置
        把Android SDK的tools和platform-tools目录添加到PATH变量中:
        PATH -> 双击进行编辑
        React-Native集成到已有项目中的总结

  6. 集成到已有的APP中

    1. 安装组件

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

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

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

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

        依次执行以下命令行：
        $ 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' 不是内部或外部命令，也不是可运行的程序
        或批处理文件。

         
        React-Native集成到已有项目中的总结
         
        $ npm install react@x.0.0-alpha.x
         
        React-Native集成到已有项目中的总结
        此警告可忽略
         
        3.当出现下面提示，需安装curl，否则请跳过
        React-Native集成到已有项目中的总结
        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文件，

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

        打开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
 
出现下面提示后
React-Native集成到已有项目中的总结
 
终于可以运行了···结果屏幕红了， 报错行：
com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly
    • React-Native集成到已有项目中的总结
    • 原因：没有找到执行的bundle文件。
      两种解决方式：
  1. 修改项目中的package.json文件

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

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

        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

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

assets下生成两个文件：
React-Native集成到已有项目中的总结
 
摇晃设备，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

连接网线时，采用
React-Native集成到已有项目中的总结
 
连接wifi时，采用
 
React-Native集成到已有项目中的总结
 

补充：

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
 

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

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

相关文章