React Native 與 嵌入Android原生與Activity頁面互相跳轉
阿新 • • 發佈:2019-01-26
前言
RN作為混合開發,肯定需要與原生直接的頁面跳轉,這裡也屬於和原生端通訊的知識模組。我們知道Android的頁面跳轉是通過Intent、Rn是通過路由,而兩者直接頁面互相跳轉就需要原生藉助JS暴露介面給Rn來實現了。先上效果圖:
第一步,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);
- })
- }
- 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
*不知道如何安裝執行的請移步前兩章 :
歡迎入坑: