RN集成到Android原生项目

最新推荐文章于 2022-06-16 10:32:24 发布

barnett_y

最新推荐文章于 2022-06-16 10:32:24 发布

阅读量872

点赞数 1

分类专栏：【Flutter点滴知识】

原文链接：https://www.jianshu.com/p/f546ad231382

版权

【Flutter点滴知识】专栏收录该内容

397 篇文章 75 订阅

订阅专栏

最近一段时间比较忙，也没时间梳理下自己的学习笔记，隔了好久也不知道要整理些什么出来，刚好最近在整理下React Native相关的东东，所以在此记录下留作笔记使用。（在这就不描述Android项目和RN项目环境如何搭建了。）

一、Android项目集成RN

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

在项目根目录下引入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"
      }
    }

引入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
引入.flowconfig文件
- 方法一：.flowconfig文件可以从facebook的github上复制，然后在工程的根目录创建.flowconfig文件，将其内容复制进去即可。
- 方法二：在Terminal中执行以下命令：
```
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
```
接下来打开package.json文件，在scripts模块下添加，如上步骤2显示。
"start": "node node_modules/react-native/local-cli/cli.js start"

在项目根目录下的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"//此处目录请额外注意
          }
      }
  }

在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"
            }
        }

在 AndroidManifest.xml 清单文件中声明网络权限:
```
<uses-permission android:name="android.permission.INTERNET" />
```
如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:
```
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
```

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

在根目录下创建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);

在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 访问没有报错，则说明启动成功.

在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;
 }
}

在对应Activity中添加如下代码：

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