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

        参照文档Add JS to your app集成

        • 在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命令要花费几分钟，默认安装[email protected]，此处有个坑，需改成0.42.0

        执行$ npm install --save [email protected]，或者上面第二条命令直接改成：

        $ npm install --save react [email protected]

        安装缺少的react

        $ npm install [email protected]

        此警告可忽略

        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文件，

        打开该文件，拷贝以下内容，测试“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);
        • 在app build.gradle文件dependencies 中添加
        1 dependencies {
2     ...
3     compile "com.facebook.react:react-native:0.44.0" // 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

      内容如下：

      •  1 public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
 2     private ReactRootView mReactRootView;
 3     private ReactInstanceManager mReactInstanceManager;
 4
 5     @Override
 6     protected void onCreate(Bundle savedInstanceState) {
 7         super.onCreate(savedInstanceState);
 8
 9         mReactRootView = new ReactRootView(this);
10         mReactInstanceManager = ReactInstanceManager.builder()
11                 .setApplication(getApplication())
12                 .setBundleAssetName("index.android.bundle")
13                 .setJSMainModuleName("index.android")
14                 .addPackage(new MainReactPackage())
15                 .setUseDeveloperSupport(BuildConfig.DEBUG)//true
16                 .setInitialLifecycleState(LifecycleState.RESUMED)
17                 .build();
18         mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
19 //"HelloWorld"需和index.android.js中方法 AppRegistry.registerComponent()第一个参数保持一致
20         setContentView(mReactRootView);
21     }
22
23     @Override
24     public void invokeDefaultOnBackPressed() {
25         super.onBackPressed();
26     }
27 }

        布局文件主题设置：

      • 1 <activity
2   android:name=".MyReactActivity"
3   android:label="@string/app_name"
4   android:theme="@style/Theme.AppCompat.Light.NoActionBar">
5 </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文件

      • 在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”页面了。汗啊，费了好大劲···

附：查询电脑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

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

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

时间： 2024-10-12 18:50:59

React-Native集成到已有项目中的总结的相关文章

React Native—集成到原生Android项目

目前的react-native版本是0.57.8,參考了一些文章之後,終於集成好了.React Native環境的搭建我就不説了,詳細的可以參考React Native中文網的搭建文檔. 創建新的Android工程 環境配置好之後(sdk下載可能比較慢),用Android Studio創建一個Empty Activity的項目. 集成React Native 安裝相關依賴 在項目根目錄下執行 npm init 命令,生成 package.json 文件.此時要注意一下package name和入

将Hibernate Search集成进已有项目中，实现全文检索功能

本来是准备使用Lucene的但是新版本的API过于繁琐,最后还是决定使用Hibernate Search来实现全文检索.这篇博文以我以前做的博客为例来实现全文检索. 1.修改Hibernate配置文件,因为我的系统采用的是SSH2来开发的所以我修改的是spring配置文件 <bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">

React Native集成到Android项目当中

集成到Android项目当中 安装JavaScript依赖包 在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内 { "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/r

Angular团队发布路线图，并演示如何与React Native集成

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧金山举行的Angular U大会上,Brad Green.Igor Minar与Misko Hevery共同发表了演讲,重新阐述了年初在ng-conf大会的声明,并给出了2015年下半年关于Angular的路线图. Minar展示了3月份以来Angular所取得的一些新进展.值得注意的是,这些都是一

Angular团队公布路线图，并演示怎样与React Native集成

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧金山举行的Angular U大会上,Brad Green.Igor Minar与Misko Hevery共同发表了演讲,又一次阐述了年初在ng-conf大会的声明,并给出了2015年下半年关于Angular的路线图. Minar展示了3月份以来Angular所取得的一些新进展.值得注意的是,这些都是

Resx 文件无效。未能加载 .RESX 文件中使用的类型 System.Collections.Generic.List`1请确保已在项目中添加了必需的引用。

在C#程序编写过程中,会遇到:Resx 文件无效.未能加载 .RESX 文件中使用的类型 System.Collections.Generic.List1`请确保已在项目中添加了必需的引用. 主要原因很可能是使用了类的可序列化的原因,代码如下: [Serializable] public class TimeLineItem { public string Title; public string Content; public TimeLineItem(string content) { th

React Native集成到现有项目(非cocoa pods)

将一个现有的ios项目添加react native支持时,有以下几个关键步骤: 在项目里新建一个group,然后在node_modules下面找到React和Libraries两个文件夹,将这两个文件夹下的.xcodeproj文件引入到我们创建的group中. 找到项目的build settings配置,在Header Search Paths下面新增一个地址,定位到node_modules/react-native/React目录下,选择递归(recursive). 找到项目的build ph

SpringMVC将一个项目集成在另一个项目中

将KissfloveUtil项目集成在自己项目中.在pom.xml中加入以下配置: <dependencies> <dependency> <groupId>com.kissflove</groupId> <artifactId>kissfloveUtil</artifactId> <version>0.0.1</version> </dependency> </dependencies>

React Native专题文章讲解,不断更新中.....

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50633488 本文出自:[江清清的博客] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装React Nati