我自横刀向天笑，去留肝胆两昆仑。这篇文章主要讲述ReactNative混合开发-3 Android混编配置相关的知识，希望能为你提供帮助。
开发语言：ReactNative 0.59.5 android
开发环境：VSCode Android Studio 3.4
1、项目目录参考文章：集成到现有原生应用
首先，我们按照建立一下目录结构，其中：
Code目录放置所有公用的ReactNative脚本，包，以及相关配置。
Android目录放置原Android项目。
Code (根目录）
--Android（一级目录）
2、开发环境准备 2.1、package.json配置在Code目录下创建package.json文件，编辑文件输入以下内容。

{ "name": "AppName", "version": "0.0.1", "private": true, "scripts": { "start": "yarn react-native start" } }

2.2、React和React Native模块安装在Code目录下使用控制台执行以下语句来安装React Native。

yarn add react-native

• 注意，执行完以上命令后，可能会出现以下提示内容，表示我们需要安装指定版本的React（此例子中需要安装版本为16.8.3的React）。

warning " > react-native@0.59.5" has unmet peer dependency "react@16.8.3".
在Code目录下使用控制台执行以下语句来安装指定版本的React

yarn add react@16.8.3

3、配置maven 3.1、在app的build.gradle文件中添加React Native依赖

dependencies { ... implementation "com.facebook.react:react-native:+" // 新增React Native依赖 }

3.2、在项目的build.gradle文件中添加maven的依赖入口

allprojects { repositories { ... maven { url "$rootDir/../../node_modules/react-native/android"} //注意url路径应该指向根目录code中的node_modules， } }

3.3、在AndroidManifest.xml声明网络权限

< manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.reactnativedemo" > < uses-permission android:name="android.permission.INTERNET" /> //新增网络权限 ... < /manifest>

3.4、在AndroidManifest.xml配置调试Activity

< ?xml version="1.0" encoding="utf-8"?> < manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.reactnativedemo" > < uses-permission android:name="android.permission.INTERNET" /> < application... //调试Activiy，使用摇一摇呼出 < activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> < /application> < /manifest>

4、脚本创建在Code根目录下创建Scripts文件夹，用于存放React Native的脚本文件
Code (根目录）
--Scripts（一级目录，用于存放所有React Native的脚本）
然后我们可以在Scripts目录下开始写ReactNative的脚本了。
首先我们创建一个FrameText.js，然后写入如下内容：

import React, { Component } from ‘react‘ import { View, Text } from ‘react-native‘export default class FrameText extends Component {render() { return ( < View style={{ width:200, height:100, backgroundColor: ‘#CDDAF5‘ }}> < Text> {"我来自ReactNative，我是FrameText"}< /Text> < /View> ); } } // 整体js模块的名称 export { FrameText }

在FrameText中，我们创建了一个简单的组件，供其他脚本使用。
然后我们再创建一个index.js，然后写入如下内容

import {AppRegistry} from ‘react-native‘ import {FrameText} from ‘FrameText‘// 整体js模块的名称 AppRegistry.registerComponent(‘Component-1‘, () => FrameText);

在index中，我们注册了FrameText组件，供app使用，我们可以在index.js注册很多不同的组件，app可以通过我们注册的名字（本例中为Component-1）来创建这些组件，下面我们来看看怎么在app内使用他们。
5、Android项目修改本例中期望在app的一个controller内，同时使用原生语言与ReactNative脚本分别显示2个View，现在我们来看看是如果在原生app中加载ReactNative的View。
 
文章图片
  5.1、创建 MyReactNativeBridge新建一个java文件，创建MyReactNativeBridge类，顾名思义，此类负责桥接原生app与ReactNative，注意，一个app中最好只创建一个桥接实例，所以使用单利模式创建。

package com.example.reactnativedemo; import com.facebook.react.ReactInstanceManager; import com.facebook.react.common.LifecycleState; import com.facebook.react.shell.MainReactPackage; public class MyReactNativeBridge {private static final ReactInstanceManager mReactInstanceManager = ReactInstanceManager.builder() .setApplication(MyApplication.getInstance()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("Scripts/index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) //注册弹出调试菜单的Activity,发布版可以无需注册 .setCurrentActivity(MyApplication.getInstance().getCurrentActivity()) .build(); private MyReactNativeBridge() {}public static ReactInstanceManager getInstance() { return mReactInstanceManager; } }

5.2、创建并使用ReactRootViewReactRootView为ReactNative脚本描述的View，它继承FrameLayout，我们可以通过MyReactNativeBridge来创建ReactRootView。

public class MainActivity extends AppCompatActivity {private ReactRootView mReactRootView; LinearLayout reactView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); reactView = findViewById(R.id.reactLayout); MyApplication.getInstance().setCurrentActivity(this); mReactRootView = new ReactRootView(this.getApplicationContext()); mReactRootView.startReactApplication(MyReactNativeBridge.getInstance(), "Component-1", null); reactView.addView(mReactRootView); }}

现在我们在真机上运行模拟器，并且命令开启ReactNative服务器（yarn start），就可以看到上面例子中的画面了。
6、原生与ReactNative通信 6.1、原生向ReactNative传递数据注意我们在startReactApplication时的语句的第三个参数initialProperties，代表由原生向ReactNative传递的参数。

mReactRootView.startReactApplication(MyReactNativeBridge.getInstance(), "Component-1", null);

现在修改创建语句和脚本

• Java代码：通过initialProperties向JS传递参数

public class MainActivity extends AppCompatActivity {private Bundle mockData = https://www.songbingjia.com/android/new Bundle(); protected void onCreate(Bundle savedInstanceState) {... mockData.putString("content", "初始化"); mReactRootView = new ReactRootView(this.getApplicationContext()); mReactRootView.startReactApplication(MyReactNativeBridge.getInstance(), "Component-1", mockData); reactView.addView(mReactRootView); }}

• JS脚本：通过this.props["content"]使用原生App传递的参数（也可以使用this.props.content）

...export default class FrameText extends Component {render() { return ( < View style={{ width:200, height:100, backgroundColor: ‘#CDDAF5‘ }}> < Text> {this.props["content"]}< /Text> < /View> ); } }...

重新编译代码后，再次运行App，可以看到界面变成如下的样子
 
文章图片
  ReactRootView还有一个方法setAppProperties，我们可以通过这个方法来对已经创建的View传递参数。

• Java代码：通过setAppProperties属性向已创建的View传递参数

protected void onCreate(Bundle savedInstanceState) { ...mockData.putString("content", "重加载"); mReactRootView.setAppProperties(mockData); ... }

重新编译代码后，再次运行App，可以看到界面变成如下的样子
 
文章图片
  6.2、ReactNative向原生传递数据我们使用ReactContextBaseJavaModule来定义一个ReactNative中的NativeModules类型。在ReactContextBaseJavaModule中，我们可以使用@ReactMethod注解来提供结构供脚本回调。
首先我们创建一个MyReactNativeBridge.swift文件

package com.example.reactnativedemo; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; public class MyReactNativeCommunication extends ReactContextBaseJavaModule {public MyReactNativeCommunication(ReactApplicationContext reactContext) { super(reactContext); }//提供Test方法 @ReactMethod public void test(String str) { System.out.println(str); }//提供在NativeModules中该类的名字 @Override public String getName() { return "MyReactNativeCommunication"; }}

然后我们使用MyReactNativePackage来注册这个类，否则脚本无法使用

package com.example.reactnativedemo; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class MyReactNativePackage implements ReactPackage {@Override public List< ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); }@Override public List< NativeModule> createNativeModules( ReactApplicationContext reactContext) { List< NativeModule> modules = new ArrayList< > (); modules.add(new MyReactNativeCommunication(reactContext)); return modules; }}

然后在MyReactNativeBridge将MyReactNativePackage添加到mReactInstanceManager中

public class MyReactNativeBridge {private static final ReactInstanceManager mReactInstanceManager = ReactInstanceManager.builder() .setApplication(MyApplication.getInstance()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("Scripts/index") .addPackage(new MainReactPackage()) .addPackage(new MyReactNativePackage())//新增MyReactNativePackage .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .setCurrentActivity(MyApplication.getInstance().getCurrentActivity()) .build(); }

最后修改JS代码，调用test方法

import { NativeModules } from ‘react-native‘export default class FrameText extends Component {render() { NativeModules.MyReactNativeCommunication.test("我回来啦"); ... } }

【ReactNative混合开发-3 Android混编配置】重新编译代码后，再次运行App，可以看到Android的输出 “ 我回来啦”


作者：肆点壹陆
链接：https://www.jianshu.com/p/e1ac474a9bb1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

推荐阅读

• 

  咸阳装修公司口碑最好 咸阳装修
• 

  风流果树种植方法，风流果种植栽培技术
• 

  恋爱中常吃醋的人有哪些表现 恋爱中的人为什么都容易吃醋
• 

  病人|如果你是卒中病人，如果你有这些不良习惯和错误观念……
• 

  尿蛋白1十需要治疗吗 尿蛋白高是怎么回事
• 

  牛油果能去火吗 吃牛油果去火吗
• 

  按摩八髎有什么作用
• 

  mysql几种连接方式 mysql怎么建立链接
• 

  英雄联盟9.16版本,潘森重做上线,技能逆天,网友：妥妥的上单霸主,如何评价？
• 

  vlan划分的目的是什么 为什么要划分vlan
• 

  涂防冻液只能冬天给车用吗,蚂蚁庄园防冻液12月25日答案
• 

  卫生统计数据分析报告,机构能源消耗统计数据分析报告
• 

  怀孕5个月了，能不能吃鸭血啊
• 

  2023年宁波九龙湖半程马拉松报名指南 2021宁波九龙湖马拉松报名
• 

  watchout,look out
• 

  佳能墨盒芯片怎么清零的-佳能打印机ip3680墨水计数怎么清零，要详细
• 

  自制葡萄酒的正确做法 自制葡萄酒怎么做
• 

  mysql数据库字段类型有哪些 mysql常用字段名
• 

  哪里有比较好用的pdf编辑器？
• 

  实验小学,附属小学,普通小学,有什么区别,都是什么意思？

• android studio更新之后打包遇到V1（Jar Signature） V2（Full APK Signature）问题
• 如何进行健全性测试（）
• 如何进行手动测试（有什么优点？）
• GreyBox测试如何使用（）
• 开发必看（功能测试图文详细解读）
• 黑匣子测试中的因果图
• 黑匣子测试之等价分割技术
• 黑匣子测试之错误猜测技术
• 软件开发质量保证与质量控制介绍