ReactNative混合开发-3 Android混编配置

天堂里的死猪 發表於 2020-6-4 17:55:00

ReactNative混合开发-3 Android混编配置

<div>
<div>
开发语言：ReactNative 0.59.5 Android 
开发环境：VSCode Android Studio 3.4
<h1>1、项目目录</h1>
参考文章：集成到现有原生应用
首先，我们按照建立一下目录结构，其中： 
Code目录放置所有公用的ReactNative脚本，包，以及相关配置。 
Android目录放置原Android项目。
Code (根目录） 
--Android（一级目录）
<h1>2、开发环境准备</h1>
<h2>2.1、package.json配置</h2>
在Code目录下创建package.json文件，编辑文件输入以下内容。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-json"><code class="language-json">{
"name": "AppName",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "yarn react-native start"
}
}
</code></pre>
</div>
<h2>2.2、React和React Native模块安装</h2>
在Code目录下使用控制台执行以下语句来安装React Native。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-csharp"><code class="language-csharp">yarn add react-native
</code></pre>
</div>
<ul>
<li>注意，执行完以上命令后，可能会出现以下提示内容，表示我们需要安装指定版本的React（此例子中需要安装版本为16.8.3的React）。</li>
</ul>
warning " > react-native@0.59.5" has unmet peer dependency "react@16.8.3".
在Code目录下使用控制台执行以下语句来安装指定版本的React
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">yarn add react@16.8.3
</code></pre>
</div>
<h1>3、配置maven</h1>
<h2>3.1、在app的build.gradle文件中添加React Native依赖</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-cpp"><code class="language-cpp">dependencies {
...
implementation "com.facebook.react:react-native:+" // 新增React Native依赖
}
</code></pre>
</div>
<h2>3.2、在项目的build.gradle文件中添加maven的依赖入口</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-dart"><code class="language-dart">allprojects {
repositories {
 ...
 maven { url "$rootDir/../../node_modules/react-native/android"} //注意url路径应该指向根目录code中的node_modules，
}
}
</code></pre>
</div>
<h2>3.3、在AndroidManifest.xml声明网络权限</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-xml"><code class="language-xml"><manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.reactnativedemo" >

<uses-permission android:name="android.permission.INTERNET" /> //新增网络权限
...
</manifest>
</code></pre>
</div>
<h2>3.4、在AndroidManifest.xml配置调试Activity</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-php"><code class="language-php"><?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>
</code></pre>
</div>
<h1>4、脚本创建</h1>
在Code根目录下创建Scripts文件夹，用于存放React Native的脚本文件
Code (根目录） 
--Scripts（一级目录，用于存放所有React Native的脚本）
然后我们可以在Scripts目录下开始写ReactNative的脚本了。 
首先我们创建一个FrameText.js，然后写入如下内容：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">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 }
</code></pre>
</div>
在FrameText中，我们创建了一个简单的组件，供其他脚本使用。
然后我们再创建一个index.js，然后写入如下内容
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-tsx"><code class="language-tsx">import {AppRegistry} from 'react-native'
import {FrameText} from 'FrameText'

// 整体js模块的名称
AppRegistry.registerComponent('Component-1', () => FrameText);

</code></pre>
</div>
在index中，我们注册了FrameText组件，供app使用，我们可以在index.js注册很多不同的组件，app可以通过我们注册的名字（本例中为Component-1）来创建这些组件，下面我们来看看怎么在app内使用他们。
<h1>5、Android项目修改</h1>
本例中期望在app的一个controller内，同时使用原生语言与ReactNative脚本分别显示2个View，现在我们来看看是如果在原生app中加载ReactNative的View。
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="400" data-height="711"><img src="//upload-images.jianshu.io/upload_images/16590824-9e0f339acdd76eb5.png?imageMogr2/auto-orient/strip|imageView2/2/w/400/format/webp"></div>
</div>
<div class="image-caption"> </div>
</div>
<h2>5.1、创建 MyReactNativeBridge</h2>
新建一个Java文件，创建MyReactNativeBridge类，顾名思义，此类负责桥接原生app与ReactNative，注意，一个app中最好只创建一个桥接实例，所以使用单利模式创建。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-java"><code class="language-java">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;
}
}

</code></pre>
</div>
<h2>5.2、创建并使用ReactRootView</h2>
ReactRootView为ReactNative脚本描述的View，它继承FrameLayout，我们可以通过MyReactNativeBridge来创建ReactRootView。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-java"><code class="language-java">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);
}

}

</code></pre>
</div>
现在我们在真机上运行模拟器，并且命令开启ReactNative服务器（yarn start），就可以看到上面例子中的画面了。
<h1>6、原生与ReactNative通信</h1>
<h1>6.1、原生向ReactNative传递数据</h1>
注意我们在startReactApplication时的语句的第三个参数initialProperties，代表由原生向ReactNative传递的参数。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-csharp"><code class="language-csharp">mReactRootView.startReactApplication(MyReactNativeBridge.getInstance(), "Component-1", null);
</code></pre>
</div>
现在修改创建语句和脚本
<ul>
<li>Java代码：通过initialProperties向JS传递参数</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-java"><code class="language-java">public class MainActivity extends AppCompatActivity {

private Bundle mockData = 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);
}

}
</code></pre>
</div>
<ul>
<li>JS脚本：通过this.props["content"]使用原生App传递的参数（也可以使用this.props.content）</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">...

export default class FrameText extends Component {

render() {
 return (
 <View style={{
 width:200,
 height:100,
 backgroundColor: '#CDDAF5'
 }}>
 <Text>{this.props["content"]}</Text>
 </View>
 );
}
}

...
</code></pre>
</div>
重新编译代码后，再次运行App，可以看到界面变成如下的样子
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="400" data-height="711"><img src="//upload-images.jianshu.io/upload_images/16590824-a4611edd501fa398.png?imageMogr2/auto-orient/strip|imageView2/2/w/400/format/webp"></div>
</div>
<div class="image-caption"> </div>
</div>
ReactRootView还有一个方法setAppProperties，我们可以通过这个方法来对已经创建的View传递参数。
<ul>
<li>Java代码：通过setAppProperties属性向已创建的View传递参数</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-cpp"><code class="language-cpp">protected void onCreate(Bundle savedInstanceState) {
...

mockData.putString("content", "重加载");
mReactRootView.setAppProperties(mockData);

...
}

</code></pre>
</div>
重新编译代码后，再次运行App，可以看到界面变成如下的样子
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="400" data-height="711"><img src="//upload-images.jianshu.io/upload_images/16590824-84d1bdb765a768c3.png?imageMogr2/auto-orient/strip|imageView2/2/w/400/format/webp"></div>
</div>
<div class="image-caption"> </div>
</div>
<h1>6.2、ReactNative向原生传递数据</h1>
我们使用ReactContextBaseJavaModule来定义一个ReactNative中的NativeModules类型。在ReactContextBaseJavaModule中，我们可以使用@ReactMethod注解来提供结构供脚本回调。
首先我们创建一个MyReactNativeBridge.swift文件
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-java"><code class="language-java">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";
}

}

</code></pre>
</div>
然后我们使用MyReactNativePackage来注册这个类，否则脚本无法使用
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-java"><code class="language-java">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;
}

}

</code></pre>
</div>
然后在MyReactNativeBridge将MyReactNativePackage添加到mReactInstanceManager中
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-java"><code class="language-java">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();
}

</code></pre>
</div>
最后修改JS代码，调用test方法
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">import { NativeModules } from 'react-native'

export default class FrameText extends Component {

render() {
 NativeModules.MyReactNativeCommunication.test("我回来啦");
 ...
}
}
</code></pre>
</div>
重新编译代码后，再次运行App，可以看到Android的输出 “我回来啦”
</div>
 作者：肆点壹陆 链接：https://www.jianshu.com/p/e1ac474a9bb1 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</div> 
来源：https://www.cnblogs.com/qing123/p/13045090.html

頁: [1]

琼殿技术论坛's Archiver

ReactNative混合开发-3 Android混编配置