专栏首页刘望舒RN集成到Android原生项目实践

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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android应用优化之流畅度实操

    用户1269200
  • 我是如何通过阿里面试的?

    用户1269200
  • Android解析WindowManager(三)Window的添加过程

    前言 在此前的系列文章中我们学习了WindowManager体系和Window的属性,这一篇我们接着来讲Window的添加过程。建议阅读此篇文章前先阅读本系列的...

    用户1269200
  • windows环境里React-Native运行失败,找不到Nullable的原因分析

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 前端性能:股票交易APP频繁更新怎么破

    源码demo地址:https://github.com/JinJieTan/react-keepAlive-dynamic

    Peter谭金杰
  • react native 入门实战(一)

    本文举一个简单的例子介绍如何进行 react native 实战开发,主要从以下几个方面来进行介绍:如何在 mac IOS 下进行 react native 环...

    腾讯IVWEB团队
  • react native入门实战(一)

    本文举一个简单的例子介绍如何进行react native实战开发,主要从以下几个方面来进行介绍:

    IMWeb前端团队
  • react native入门实战(一)

    本文作者:IMWeb 朱灵子 原文出处:IMWeb社区 未经同意,禁止转载 react native入门实战(一) 本文举一个简单的例子介绍如何进行r...

    IMWeb前端团队
  • React Native 基础报错及解决方案记录

    刚开始上手RN,碰到很多坑,记录一下。碰到问题多去看看github上面的issue!

    木子墨
  • react-native 打开设置界面

    mcq

扫码关注云+社区

领取腾讯云代金券