RN集成到Android原生项目实践

作者:闲庭CC https://www.jianshu.com/p/f546ad231382

一、Android项目集成RN

1.新建普通Android项目 新建一个普通的Android项目即可,打开Android Studio -> File -> New -> New Project… 按步骤执行即可。

2.在项目根目录下引入React Native模块 在AS中的Terminal中输入npm init ,输入一些项目的描述属性(默认一路回车也行),为了生成·文件的项目描述,根据提示来填写就好了,生成的json文件内容大致如下:

{
      "name": "rnappdemo",
      "version": "1.0.0",
      "description": "test",
      "main": "index.js",
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "no"
      },
      "repository": {
        "type": "git",
        "url": "no"
      },
      "keywords": [
        "no"
      ],
      "author": "liu",
      "license": "ISC",
      "dependencies": {
        "react": "^16.5.2",
        "react-native": "^0.55.4"
      }
    }

3.引入rn的一些模块文件

npm install --save react react-native

会在根目录生成一个node_modules文件夹,存的是RN的一些模块文件,如果在这个过程中出现require react@某.某.某版本, but none was installed ,那么就使用命令 npm i -S react@某.某.某版本//此处为提示的版本号. 注意:如何安装React Native指定版本,命令如:npm install --save react-native@0.55.4 ,这里建议使用因为最新版本使用可能会出错,稍微比新版低个版本,我这里没用最新版,使用的是0.55.4。 如何查看当前rn版本信息:npm info React-native

4.引入.flowconfig文件

方法一:.flowconfig文件可以从facebook的github上复制,然后在工程的根目录创建.flowconfig文件,将其内容复制进去即可。 方法二:在Terminal中执行以下命令:

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

5.接下来打开package.json文件,在scripts模块下添加,如上步骤2显示。 "start": "node node_modules/react-native/local-cli/cli.js start"

6.在项目根目录下的build.gradle添加以下配置

allprojects {
      repositories {
          jcenter()
          maven {
              url "https://maven.google.com"
          }
          maven {
              // All of React Native (JS, Android binaries) is installed from npm
              url "$rootDir/node_modules/react-native/android"//此处目录请额外注意
          }
      }
  }

7.在app下的build.gradle -> dependencies 添加以下依赖:

compile "com.facebook.react:react-native:+" // From node_modules.

同时在android -> defaultConfig 中添加 ndk{ abiFilters "armeabi-v7a","x86"} 完整如下:

   defaultConfig {
            applicationId "com.liujc.rnappdemo"
            minSdkVersion 16
            targetSdkVersion 27
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
            ndk{
                abiFilters "armeabi-v7a","x86"
            }
        }

8.在 AndroidManifest.xml 清单文件中声明网络权限:

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

如果需要访问 DevSettingsActivity 界面(即开发者菜单),则还需要在 AndroidManifest.xml 中声明:

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

二、编写RN代码运行到Android项目中

1.在根目录下创建index.android.js文件:

'use strict';
import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 NativeModules,
 View,
 ToastAndroid,
 DeviceEventEmitter
} from 'react-native';
let title = 'React Native界面';

class reactNative extends Component {

/**加载完成*/
componentWillMount() {
  let result = NativeModules.MyNativeModule.Constant;
  console.log('原生端返回的常量值为:' + result);
}

/**
* 原生调用RN
*/
componentDidMount() {
   DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
        title = "React Native界面,收到数据:" + msg;
        ToastAndroid.show("发送成功", ToastAndroid.SHORT);
   })
}
render() {
return (
  <View style={styles.container}>
    <Text style={styles.welcome} >
        {title}
    </Text>

    <Text style={styles.instructions}>
      To get started, edit index.android.js
    </Text>

    <Text style={styles.instructions}>
      Double tap R on your keyboard to reload,{'\n'}
      Shake or press menu button for dev menu
    </Text>

    <Text style={styles.welcome}>
      我是RN界面!
    </Text>
  </View>
);
 }
}
const styles = StyleSheet.create({
 container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
 },
 welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
 },
 instructions: {
   textAlign: 'center',
color: '#333333',
marginBottom: 5,
 },
});   
AppRegistry.registerComponent('reactNative', () => reactNative);

2.在Terminal中执行启动命令 npm run start 或者 yarn start//默认启动端口为8081,后面会描述如何修改端口号. 启动完成后出现如下界面:

┌──────────────────────────────────────────────   ────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to   
│
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
E:\workspace\WsForRN\RNAppDemo\RNAppDemo

Metro Bundler ready.

Loading dependency graph, done.

然后在浏览器中输入http://localhost:8081/index.android.bundle 访问没有报错,则说明启动成功.

3.在Application里面添加如下代码:

public class AppApplication extends Application implements ReactApplication {
 private static AppApplication instance;
 @Override
 public void onCreate() {
     super.onCreate();
     instance = this;
     SoLoader.init(this, false);
 }

 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()
         );
     }
 };

 /**
  * 获取Application实例
  */
 public static AppApplication getInstance() {
     return instance;
 }
 @Override
 public ReactNativeHost getReactNativeHost() {
     return mReactNativeHost;
 }
}

4.在对应Activity中添加如下代码:

public class MyRNActivity extends ReactActivity {
 @Override
 protected String getMainComponentName() {
     return "reactNative";//此处容器名要与index.android.js里面注册的控件名一致
 }
}

5.记得把Application和对应的Activity在AndroidManifest.xml中注册使用。运行APP即可加载RN界面。 备注:设备要和服务端在同一局域网下调试,即链接同一WiFi或者设备链接电脑的代理。

— — — END — — —

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2018-10-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发实战

Android启动过程分析(图+文)

①点击桌面App图标,Launcher进程采用Binder IPC向system_server进程发起startActivity请求;

2784
来自专栏移动端周边技术扩展

2018-01-12dyld: Library not loaded: 各种情况

3722
来自专栏运维小白

11.25 配置防盗链

配置防盗链目录概要 通过限制referer来实现防盗链的功能 配置文件增加如下内容 Directory针对目录进行 <Directory /data/www...

2165
来自专栏Cloud Native - 产品级敏捷

微服务架构设计 第八步: 设计微服务对外 REST API

2016.9.22, 北京, Ken Fang 开发与测试人员协作完成了: 微服务对外需提供的方法 (API) 后, 开发与测试人员便需继续协作, 将微服务对外...

4636
来自专栏PHP在线

重磅资料!Github上的PHP资源汇总大全

依赖管理 ——用于依赖管理的包和框架 Composer/Packagist : 一个包和依赖管理器 Composer Installers: 一个多框架Com...

3204
来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令十六

今天我们来学习几个小知识,不一定是Linux的命令,都是用于查看Linux的系统信息的

1673
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第十三天 基础加强-JDBC高级开发事务【悟空教程】

insert into account values (null,'jack',10000);

872
来自专栏ChaMd5安全团队

CVE-2018-1000156:GNU Patch任意代码执行漏洞分析

GNU Patch 源码下载地址:https://ftp.gnu.org/gnu/patch/

2562
来自专栏张戈的专栏

零门槛!使用Docker快速部署ES集群

自从接触 Docker 之后,对 Docker 简直是爱不释手,做什么都是行云流水。遇到部署开源软件需求,第一时间想到的都是有没有现成的 Docker 镜像?能...

3K4
来自专栏Objective-C

React Native 部署开发环境

5675

扫码关注云+社区

领取腾讯云代金券