React Native嵌入Android原生应用中

开发环境准备

首先你要搭建好React Native for Android开发环境， 没有搭建好的可以参考：React Native for Android Windows环境搭建

用Android Studio新建Android原生项目

我创建了一个名叫ReactNativeDemo的原生项目。

把React Native集成到原生项目当中

利用Windows命令行在项目根目录(ReactNativeDemo文件夹)下执行下面三行命令：

npm init

npm install –save react react-native

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

这将在项目根目录(ReactNativeDemo文件夹)创建node_modules文件夹(模块)，并添加React Native依赖。

针对上面三条命令的解释

npm init

注意:

name的填写由图可知填默认的是不行的，它的要求是不能有大写字母并且不能以数字开头；

entry point的填写入口文件名称，默认的是index.js，我们建立的入口文件是index.android.js，所以填写index.android.js。只要填写的名称与自己定义的入口文件名称一致就行。

其他的项根据自己需求填写即可。

这个步骤会在项目的根目录产生一个名称为package.json的文件，我们还需要修改我们的package.json文件：

在”scripts”节点下添加”start”: “node node_modules/react-native/local-cli/cli.js start”。

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }

其中的test节点是自动生成的，我们可以把它删除，最后我的package.json为：

{
  "name": "reactnativedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.android.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-native": "^0.38.0"
  }
}

npm install –save react react-native

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。

所以可知上面这句话的意思是在对应网址下下载.flowconfig文件。

在windows下我们要使用curl命令会提示:curl不是内部和外部命令，也不是可执行文件或批处理命令。。。

我们在windows下要使用curl命令比较麻烦。解决方法就是我们用下载工具从https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig上把

.flowconfig下载下来复制到项目根目录，或者是在项目根目录下新建一个.flowconfig文件用浏览器访问这个网址其中的内容把其中的内容复制到文件当中。

建立index.android.js文件

在项目的根目录建立index.android.js文件并把下面的代码复制进去：

‘use strict‘;

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

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Welcome!</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
  },
  hello: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
});

AppRegistry.registerComponent(‘HelloWorld‘, () => HelloWorld);

添加依赖

在项目的根目录的build.gradle中加入：

allprojects {
    repositories {
        jcenter()
        maven {
            //添加react native依赖，url路径根据实际的来写，本文的如下：
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

注意：Android项目默认的依赖包的源为jcenter()，其中并不包含最新版的 React Native（它只到0.20.1）。

新版的React Native只在npm里发布，所以你需要增加一下依赖包的源。在编译完后，检查项目External Libraries的

react-native版本如果为0.20.1，则说明maven的依赖源没有添加成功。这时候应该是maven的路径出问题了，你要检查

路径是否正确，正确的结果为：

在项目的模块(app)中的build.gradle文件中添加：

文件头添加（可选）：

apply from: "$rootDir/node_modules/react-native/react.gradle"

无法编译通过的时候可以尝试添加上面这句。

 dependencies {
     ...
     compile "com.facebook.react:react-native:+"
 }

如果你想总是使用一个特定的版本，你需要把+替换成你已经下载的React Native的版本号，

这个版本号应该与package.json中的react-native的版本号(“react-native”: “^0.38.0”)一致的。如本例中的0.38.0：

 dependencies {
     ...
     compile "com.facebook.react:react-native:0.38.0"
 }

添加原生Activity文件：

MyReactActivity

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.BuildConfig;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

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") //对应index.android.js
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        //这里的HelloWorld对应index.android.js中AppRegistry.registerComponent(‘HelloWorld‘, () => HelloWorld)的HelloWorld
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        //当我们点击菜单的时候打开发者菜单，一个弹窗（此处需要悬浮窗权限才能显示）
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

AndroidManifest.xml相关

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="top.cokernut.reactnativedemo">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MyReactActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

网络权限：

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

悬浮窗权限：

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

有悬浮窗权限才能显示：

注册MyReactActivity：注意主题为Theme.AppCompat.Light.NoActionBar

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

开发设置界面：

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

运行应用

启动开发服务器

在项目的根目录下运行：

npm start

这个命令运行的是我们package.json中配置的：

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android 看看是否可以看到打包后的脚本。

第一次访问通常需要十几秒，并且在命令行可以看到进度条。

构建与运行你的程序

两种方法：

1. 在命令行中项目目录下运行gradlew installDebug

2. 直接利用Android Studio像平常一样运行项目

如果你使用的是Android studio为你构建而不是Gradle构建(gradlew installDebug)，你要确保你在安装应用之前运行了npm start。

以防止它们之间出现冲突。

效果：

在Android Studio中打包成独立安装程序

你可以使用Android Studio来创建你的App的发布版本！像以前创建原生应用程序的发布版本一样简单，只是有一个额外步骤：

在你打包你的发布版本之前要创建一个bundle文件，这个bundle文件会创建在项目的assets目录中，并且这个文件会包含在你的apk包中，

在你的项目根目录中运行：

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

app/src/main根据实际情况改为自己项目中的目录，参考assets文件夹的目录。

结果为：

如果报错：

ENOENT: no such file or directory

你需要在你的app模块中建立assets文件夹和index.android.bundle。

现在你可以对你的应用程序进行打包发布了。

问题与解决方案

打不开开发者菜单

查看AndroidManifest.xml文件中是否加入了悬浮窗权限：

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

并且你要在手机上开启你要调试的应用的悬浮窗权限，不同的手机开启方式不同，可以自行搜索开启方法。

错误 “/data/data/package-name/lib-main/libgnustl_shared.so” is 32-bit instead of 64-bit

取消掉所有的64位的.so文件，全部加载32位的.so文件。

  1. 在项目的根目录的build.gradle中加入：

    android.useDeprecatedNdk=true.

  2. 在项目的模块(app)中的build.gradle文件中添加:
android {
    ...
    defaultConfig {
        ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }

        packagingOptions {
            exclude "lib/arm64-v8a/librealm-jni.so"
        }
    }
}

错误：Could not get BatchedBridge,make sure your bundle is packaged correctly

可能是build模式选择了release模式，引发的这个错误，你可以检查一下是否是debug模式，如果不是改为debug再试一下。

因为正式版需要你创建 React Native bundle文件(index.android.bundle)存放到本地 asserts 目录,

参考上文（在Android Studio中打包成独立安装程序），运行生成bundle文件命令之后再点击Android Studio的run按钮运行程序即可正常显示。

注意：这个方法有一个弊端，因为正式版，所以修改了页面js文件之后，不能像单独的React Native项目一样可以不重新运行项目只需要点击Reload

即可立刻看到修改的js页面的效果，想重新看到效果需要再运行一遍生成bundle文件命令然后点击run按钮重新运行才能看到结果。这个方法可以不开启

开发服务器也能看到js页面效果，因为js页面是通过bundle文件来运行的，就像正式的apk一样可以独立运行。

debug模式release模式React Native JS代码调试的区别:

debug模式: 修改完js代码打开开发者菜单点击Reload就可以看到更新后的效果，或者是开启Live Reload(点击Enable Live Reload)

这样我们修改了js文件只要保存就会自动Reload。

release模式: 修改完js代码需要重新生成index.android.bundle 文件，点击run之后才能看到效果。因为正式版发布后是无法

依赖本地服务器去更新index.android.bundle，需要把index.android.bundle打包到apk中才能运行。

其他方案：

方案1. 修改package.json文件如下：

  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/"
  },

这个方法我的没成功，仅供参考。

方案2.在AndroidManifest.xml文件中加入如下权限：

<android:uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<android:uses-permission android:name="android.permission.READ_PHONE_STATE" />
<android:uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

然后开启开发者服务器(npm start)，之后run项目看看是否有结果。

这个方法我的没成功，仅供参考。

错误

解决方法：

把Android Studio自动生成的文件夹androidTest和test删除，并修改项目的模块(app)的build.gradle文件：

修改前：

修改后：

其他问题可以参考React Native for Android Windows环境搭建

源代码

Documents

时间： 2024-10-29 19:08:28

React Native嵌入Android原生应用中的相关文章

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和入

【React Native开发】React Native For Android环境配置以及第一个实例

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50456967 本文出自:[江清清的博客] (一)前言 FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然Android版本的项目发布比较迟,但是也没有阻挡了广大开发者的热情.可以这样讲在2015年移动平台市场上有两个方向技术研究比较火,第一种为阿里,百度,腾讯

React Native移植iOS原生项目

手工集成React Native 第一步:初始化React Native环境 在我们要集成的项目中,进入到*.xcodeproj文件的上级目录,运行React Native初始化命令react-native init [Project Name]会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程.init过程会需要一点时间,耐心等待. 完成后项目文件目录会变成这样: node_modules:react native依赖包 ios:iOS项目相关代码,Xcode工程文件 an

React Native For Android 架构初探

Facebook 在2015.9.15发布了 React Native for Android,把JavaScript 开发技术扩展到了Android平台.React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 基于Web,iOS 和 Android 平台的原生应用.本文将浅析Android React的架构及相关基础知识.环境搭建及调试相关知识参考官网文档即可,本文不再赘述. 一.React架构分析 1.层次架构: Java层:ja

工作方向转变—— React Native For Android

既然选择了北漂,如果不玩命,就被命运玩. 最近,Fackbook将自己的著名的框架React Native,宣称支持了Android了.根据公司和朋友的推荐,个人机会在2015年的剩下时间用来研究使用此框架,来完成自己的业务.希望了解熟此框架的大神给予我多多指点. 为什么要使用此框架? 下面引入自新闻报道 开源已是大势所趋,连习惯专有化的巨头也发现了它的力量.Facebook 是其中最积极之一,近几年陆续开源的项目已有 30 多个.刚刚社交巨头又在一年一度的 @Scale 大会上宣布开源原生应用

3.React Native在Android中自定义Component和Module

React Native最终展示的UI全是Native的UI,将Native的信息封装成React方便的调用.那么Native是如何封装成React调用的?Native和React是如何交互的? ViewManager UI组件:将Native的UI暴露出来供JS调用. Native组件封装成JS组件供JS调用.这里的一个问题是怎么将Native中的属性用在JS中,以及属性可以有哪些类型的?可以先思考一下. 下面Native的代码自定义了一个View并定义了一个变化的属性color. publi

Android React Native在Android Studio中执行bundleReleaseJsAndAssets 打包失败的解决方法

这个坑在文章记一次在Windows上搭建React Native Android环境踩过的坑中我已经提到过,当时找不到解决方法,只能开一个命令提示符终端独立执行打包.就像这样子 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output C:\Users\Administrator\Desktop\AwesomeProject\android\app\build\

React—Native开发之原生模块向JavaScript发送事件

首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript. (2)使用Promise来实现. (3)原生模块向JavaScript发送事件. 其中,在我的博客React-Native开发之原生模块封装(Android)升级版 较为详细的阐述了如何使用回调函数Callback 来将数据传向JavaScript 端. 但是有一个比较难以解决的问题是: cal

react native 之 Android物理返回键

基本用法 根据文档,安卓back键的处理主要就是一个事件监听: 1 BackAndroid.addEventListener('hardwareBackPress', this.onBackPressed); 2 BackAndroid.removeEventListener('hardwareBackPress', this.onBackPressed); 在starter-kit里,我们在App这一级别,实现了按back键回退导航栈的功能: 1 class App extends React