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

React Native 與 Android原生Activity互相跳轉頁面，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 createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.asList(new MyIntentModule(reactContext));
    }
    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

四、接著在MainApplication中的getPackages方法中註冊到ReactPackage中：

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

五、接下來的工作便是RN的Index.js代碼：

 

*從RN跳轉到Android

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 plaincopy

 

1. getData(){
2. NativeModules.IntentModule.dataToJS((msg)=>{
3. console.log(msg);
4. letbase=require('./constant');
5. base.columnID=msg;
6. //ToastAndroid.show('JS界面:從Activity中傳輸過來的數據為:'+base.columnID,ToastAndroid.SHORT);
7. },
8. (result)=>{
9. ToastAndroid.show('JS界面:錯誤信息為:'+result,ToastAndroid.SHORT);
10. })
11. }

     

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

    [java]view plaincopy

     

    1. componentDidMount(){
    2. letbase=require('./constant');
    3. //ToastAndroid.show(base.columnID,ToastAndroid.SHORT);
    4. letid=base.columnID;
    5. if(id=="3"){
    6. const{navigator}=this.props;
    7. if(navigator){
    8. navigator.push({
    9. name:'secondPage',
    10. component:secondPage,
    11. })
    12. }
    13. }if(id=="4"){
    14. const{navigator}=this.props;
    15. if(navigator){
    16. navigator.push({
    17. name:'otherPage',
    18. component:otherPage,
    19. })
    20. }
    21. }
    22. }