react-native页面和Android原生页面间的相互跳转

本文详细介绍了在React Native(RN)应用中如何跳转到Android原生页面,以及从Android原生页面跳转回RN页面的过程。在RN中跳转Android原生界面主要通过自定义IntentModule并集成到ReactPackage。而从Android跳转RN页面,需要确保目标RN界面以App方式注册,并在Android端创建相应Activity。文中还提及了参数传递和添加返回按钮的优化方法。
摘要由CSDN通过智能技术生成

1、起因

      使用RN开发一款App的时候,需要使用到地图,但是RN中关于地图的组件都不太好用,先后试过了github里面的国产高德和百度,最后无奈都放弃了,只好考虑原生开发。使用原生开发绕不开的问题就是在RN中跳转到Android原生页面和在Android原生页面中跳转到RN页面。

2、RN跳转Android原生界面

在寻找方案的过程中,发现很多博文,在RN调用Android原生页面方面都简的比较清楚,即自定义IntentModule并添加到ReactPackage的List中。

关键代码如下:

一、自定义IntentModule,参考react-native中文网Android原生模块部分

自定义Java文件IntentModule.class

package com.xx.xx;

import android.app.Activity;
import android.content.Intent;
import android.text.TextUtils;
import android.widget.Toast;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.HashMap;
import java.util.Map;

public class IntentModule extends ReactContextBaseJavaModule {
    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

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

    @Override
    public String getName() {
        return "IntentModule";
    }

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }

    @ReactMethod
    public void startActivityFromJS(String name, String params) {
        try {
            Activity currentActivity = getCurrentActivity();
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值