React Native与Android的互相跳转与传参

1 创建Activity

创建一个空白的activity 继承Activity

public class MyActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);  //对应的Xml布局
        
        Intent intent = getIntent();
        String params = intent.getStringExtra("Message_Hint"); //接收参数
     
        //传参Android 
        WritableMap params = Arguments.createMap();
        params.putString("AndroidToRN","AndroidToRN");
        TRTCMainModule.sendEvent("AndroidToRN",params);  //AndroidToRN 这个关键字 必须相同
        
    }
}

2 创建Module

创建一个空白的Module 继承 ReactContextBaseJavaModule

public class MyModule extends ReactContextBaseJavaModule {
    
    private static ReactContext AndroidToRN;
    
	public MyModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.AndroidToRN = reactContext;
    }
    
    @Override
    public String getName() {
        return "MyModule";  //注意：记住getName方法中的命名名称，JS中调用需要
    }
    
    
    @ReactMethod  //标记这个方法是Reactnative 调用
    public void activityAndData(String name, String params){  //接收参数 并且跳转页面
        try{
            Activity currentActivity = getCurrentActivity();
            if(null!=currentActivity){
                Class toActivity = Class.forName(name);
                Intent intent = new Intent(currentActivity,toActivity);
                intent.putExtra("Message_Hint", params); //传参标记 用来接收参数时使用
                currentActivity.startActivity(intent);  //跳转 MyActivity
            }
        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException(
                    "不能打开Activity : "+e.getMessage());
        }
    }
    @ReactMethod  //标记这个方法是Reactnative 调用
    public void onlyData(String params){  //接收参数 
        try{
        
        }catch(Exception e){

        }
    }
    //Android调用传参ReactNative 调用触发
    public static void sendEvent(String eventName, WritableMap params){
  AndroidToRN.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
    }
}

3 创建Package

创建空的package 继承 ReactPackage

public class MyPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new MyModule(reactContext));  //填写自己的Module名字
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

4 配置

一些配置

1、在 Androidmanifest.xml 引入你的Activity

<activity android:name=".MyActivity" />  #根据你的路径填写

2、在 MainApplication 引入你的Package

protected List<ReactPackage> getPackages() {    
    return Arrays.<ReactPackage>asList(            
        new MainReactPackage(),
        new MyPackage()  //引入
    );
}

5 React Native 调用

//引入
import {NativeModules,DeviceEventEmitter} from "react-native";
let MyModule = NativeModules.MyModule; //MyModule  这个跟 MyModule 里面的名字相同

//调用  
MyModule.activityAndData('com.xxx.MyActivity', "DATA");   //调转Android页面并且传参
//com.xxx.MyActivity  xxx: Android包名  路径要对
MyModule.onlyData("DATA"); 


//接收android参数
this.androidToRNListener = DeviceEventEmitter.addListener("AndroidToRN",e=>{
    console.log("AndroidToRN",e);  //AndroidToRN 是一个唯一标识必须相同
})

*6 Android跳转React Native

6.1 React Native创建新的页面一共跳转

//该文件 文件名AndroidToRN.js
import React, {Component,Fragment} from 'react';
import {
    View,
    Text, 
} from 'react-native';

export default class AndroidToRN extends Component {

    constructor() {
        super();
        this.state = {};
    }

    render() {
        return (
            <View>
                <Text>{'AndroidToRN'}</Text>
            </View>
        );
    }
}

6.2 在ReactNative的初始页面注册

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import App from '.App';
import {name as appName} from './app.json';
import AndroidToRN from '.AndroidToRN';

AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent("AndroidToRN", () => AndroidToRN); 
//"AndroidToRN"这个名字 一定要和Android return的名字相同

6.3 在Android 创建新的文件继承 ReactActivity

package com.testredux.module.androidToRN;
import com.facebook.react.ReactActivity;

public class AndroidToRN extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "AndroidToRN";  //这个名字必须和ReactNative注册的相同
    }
}

6.4 在AndroidManifest.xml文件中添加

<activity android:name=".AndroidToRN"></activity>
<!-- 注意自己的路径 -->

6.5 在Android中的跳转

@Override
public void onClick(View v) {
    Intent intent = new Intent(MyActivity.this , AndroidToRN.class);
    startActivity(intent);
}

参考

ReactNative与Android原生页面的相互跳转以及相互通信