React Native 與嵌入Android原生與Activity頁面互相跳轉

ReactNative Activity · 發表 2019-03-12 22:01:40

摘要：前言 RN作為混合開發，肯定需要與原生直接的頁面跳轉，這裡也屬於和原生端通訊的知識模組。我們知道Android的頁面跳轉是通過Intent、Rn是通過路由，而兩者直接頁面互相跳轉就需要原生藉助JS暴露介面給Rn來實現了。先上效果圖： image.png...

前言

RN作為混合開發，肯定需要與原生直接的頁面跳轉，這裡也屬於和原生端通訊的知識模組。我們知道Android的頁面跳轉是通過Intent、Rn是通過路由，而兩者直接頁面互相跳轉就需要原生藉助JS暴露介面給Rn來實現了。先上效果圖：

image.png

Demo原始碼地址： https://github.com/aiyangtianci/MyReactDemo

執行專案： React Native 配置環境，執行第一個RN專案

整合專案： React Native 教程——整合到現有原生應用

第一步，AS建立一個Activity,顯示HelloWorld：

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(createView());
}
private View createView() {
LinearLayout ll= new LinearLayout(this);
ll.setGravity(Gravity.CENTER);
ll.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
// 設定文字
TextView mTextView = new TextView(this);
mTextView.setText("hello world");
LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// 在父類佈局中新增它，及佈局樣式
ll.addView(mTextView, mLayoutParams);
return ll;
}

第二步，建立MyIntentModule類，並繼承ReactContextBaseJavaModule。

注意：方法頭要加@ReactMethod

/**
 * 原生Activity與React互動——模組
 */

public class MyIntentModule extends ReactContextBaseJavaModule {

public MyIntentModule(ReactApplicationContext reactContext) {
super(reactContext);
}

@Override
public String getName() {
return "IntentMoudle";
}
//注意：記住getName方法中的命名名稱，JS中呼叫需要

@ReactMethod
public void startActivityFromJS(String name, String params){
try{
Activity currentActivity = getCurrentActivity();
if(null!=currentActivity){
Class toActivity = Class.forName(name);
Intent intent = new Intent(currentActivity,toActivity);
intent.putExtra("params", params);
currentActivity.startActivity(intent);
}
}catch(Exception e){
throw new JSApplicationIllegalArgumentException(
"不能開啟Activity : "+e.getMessage());
}
}

@ReactMethod
public void dataToJS(Callback successBack, Callback errorBack){
try{
Activity currentActivity = getCurrentActivity();
String result = currentActivity.getIntent().getStringExtra("data");
if (TextUtils.isEmpty(result)){
result = "沒有資料";
}
successBack.invoke(result);
}catch (Exception e){
errorBack.invoke(e.getMessage());
}
}
//注意：startActivityFromJS、dataToJS方法新增RN註解(@ReactMethod)，否則該方法將不被新增到RN中
}

第三步，建立MyReactPackage類

實現ReactPackage介面暴露給RN呼叫，在createNativeModules裡註冊上一步新增的模組：

/**
 * 註冊模組
 */
public class MyReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

第四步，在MainApplication中的getPackages方法中註冊到ReactPackage中：

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyReactPackage()
);
}

第五步，接下來的工作便是RN的Index.js程式碼：

import React, { Component } from 'react';
import {
View,
NativeModules,
TouchableNativeFeedback,
ToastAndroid
} from 'react-native';
export default class App extends Component<{}> {
_onPressButton() {
console.log("You tapped the button!");
NativeModules
.IntentMoudle
.startActivityFromJS("com.myreactdemo.MyActivity", null);
}
render() {
return (
<View>
<TouchableNativeFeedback onPress={this._onPressButton}>
<Text>跳轉到原生頁面</Text>
</TouchableNativeFeedback>
</View>
);
}
}

第六步，從Android跳轉到RN頁面

可以在rn中拿到activity跳轉傳遞的值，值的傳遞跟普通activity之間的跳轉沒有差別:

[javascript] view plain copy
getData() {
NativeModules.IntentModule.dataToJS((msg) => {
console.log(msg);
let base = require('./constant');
base.columnID = msg;
//ToastAndroid.show('JS介面:從Activity中傳輸過來的資料為:' + base.columnID, ToastAndroid.SHORT);
},
(result) => {
ToastAndroid.show('JS介面:錯誤資訊為:' + result, ToastAndroid.SHORT);
})
}

拿到這個值之後存在了常量類裡，就是通過這個常量來實現跳轉到不同的介面，之後的事情就迎刃而解了：

[java] view plain copy
componentDidMount() {
let base = require('./constant');
//ToastAndroid.show(base.columnID, ToastAndroid.SHORT);
let id = base.columnID;
if (id == "3") {
const { navigator } = this.props;
if (navigator) {
navigator.push({
name: 'secondPage',
component: secondPage,
})
}
}if (id == "4") {
const { navigator } = this.props;
if (navigator) {
navigator.push({
name: 'otherPage',
component: otherPage,
})
}
}
}

第七步，執行安裝：

輸入命令啟動應用：

1.進入專案根目錄：

cd MyReactDemo

2.執行：

react-native run-android

*如果裝置沒安裝上AwesomeProject，可直接用Android studio或eclipse開發工具開啟AwesomeProject檔案裡的Android專案，點選run執行安裝即可。執行應用首先需要啟動開發伺服器（Packager）

npm start

【附】相關架構及資料

image

資料領取

關注+點贊+加群：185873940 免費獲取！

點選連結加入群聊【Android IOC架構設計】： https://jq.qq.com/?_wv=1027&k=5tIZkaU

領取獲取往期Android高階架構資料、原始碼、筆記、視訊。高階UI、效能優化、架構師課程、NDK、混合式開發（ReactNative+Weex）微信小程式、Flutter全方面的Android進階實踐技術

React Native 與 嵌入Android原生與Activity頁面互相跳轉

前言