React-Native与原生页面混合路由策略(Android)

前言:做rn项目的时候,有可能会碰到有些页面是原生做的,有些页面是rn做的,那么rn页面与原生页面相互跳转的时候就很尴尬了,尴尬也得解决啊(rn存在的目的就是为了干掉原生页面,现在你硬是混合开发,怪我咯?)

先说一下目前遇到的坑: 因为我们目前所有的rn页面都在一个叫RNActivity的容器中,所以rn页面要跳转原生页面时候,调用native的jump方法开启一个叫原生activity的页面,然后原生activity继续跳转到RNActivity的时候是先finish原生activity,然后发一个通知告诉rn,rn再做切换页面的操作,然后rn页面现在点击返回(正常来说是回到原生activity),因为android无法直接操作activity栈,所以这种操作只能是又start一个原生activity(嗯嗯!! 到这里android小伙伴想想就觉得别扭对不?)

RNActivity(所有rn页面)–>跳转到原生页面xxActivity—>原生页面xxActivity又打开rn某个页面(finish原生页面xxActivity然后通知rn开启一个新页面)—>rn新页面点击返回(又startActivity开启之前的原生页面xxActivity)

好啦~~效果我就不演示了,相信这种体验对于每一个人都是不太能接受的,有小伙伴说:
1、我们可以把原生activity的数据缓存起来,然后返回的时候再赋值(是的,我只能说可以,但是你得记录多少用户行为呢? pass!!)
2、把所有activity的启动模式设置成singleinstance,好吧!!本来整个应用就一个activity栈,现在你跑出那么多个栈,我只能说,宝宝想想就恐怖, 不过我没试过,还没开始就被吓到了,直接pass了!!

好啦!总结完小伙伴的方案后,说说我自己的方案哈~~

既然acitivty我们不好操作,android里面还有一个叫fragment的东西,这东西不要太灵活哈~~先说说思路,我们就依照我们上面的步骤走:

RNActivity(所有rn页面ReactFragment)–>跳转到原生页面xxFragment(add一个原生Fragment)—>原生页面xxFragment又打开rn某个页面(hide所有的fragment,然后show RNFragment并通知rn开启一个新页面)—>rn新页面点击返回(rn页面pop操作,然后通知RNActivity show所有的fragment)

效果如图所示:

我们先点击rn页面“跳转到原生的页面“按钮–>跳转到背景为红色的原生页面—>点击原生页面的“点我跳转到rn新页面“按钮—>重新开了一个新的rn首页页面–>新的rn首页页面点击“back“按钮—>返回到背景为红色的原生页面–>原生页面点击返回–>回到最初的rn页面

代码实现:

1、把ReactRootView放到ReactFragment中

我们直接copy一个rn的ReactActivity叫MyReactActivity,然后让MainActivity继承MyReactActivity,同样copy一份ReactActivityDelegate源码,替换MyReactActivity的ReactActivityDelegate,然后提供MyReactActivity一个叫getRootView的方法,提供ReactActivityDelegate一个叫getRootView的方法,直接返回我们的ReactRootView:

MyReactActivity.java

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 * <p>
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

package com.example;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.KeyEvent;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.modules.core.PermissionAwareActivity;
import com.facebook.react.modules.core.PermissionListener;

import javax.annotation.Nullable;

/**
 * Base Activity for React Native applications.
 */
public abstract class MyReactActivity extends FragmentActivity
        implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {
   

    private final ReactActivityDelegate mDelegate;

    protected MyReactActivity() {
        mDelegate = createReactActivityDelegate();
    }

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     * e.g. "MoviesApp"
     */
    protected @Nullable
    String getMainComponentName() {
        return null;
    }

    /**
     * Called at construction time, override if you have a custom delegate implementation.
     */
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName());
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mDelegate.onCreate(savedInstanceState);
    }

    @Override
    protected void onPause() {
        super.onPause();
        mDelegate.onPause();
    }

    @Override
    protected void onResume() {
        super.onResume();
        mDelegate.onResume();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mDelegate.onDestroy();
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        mDelegate.onActivityResult(requestCode, resultCode, data);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        return mDelegate.onKeyUp(keyCode, event) || super.onKeyUp(keyCode, event);
    }

    @Override
    public void onBackPressed() {
        if (!mDelegate.onBackPressed()) {
            super.onBackPressed();
        }
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    public void onNewIntent(Intent intent) {
        if (!mDelegate.onNewIntent(intent)) {
            super.onNewIntent(intent);
        }
    }

    @Override
    public void requestPermissions(
            String[] permissions,
            int requestCode,
            PermissionListener listener) {
        mDelegate.requestPermissions(permissions, requestCode, listener);
    }

    @Override
    public void onRequestPermissionsResult(
            int requestCode,
            String[] permissions,
            int[] grantResults) {
        mDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }

    protected final ReactNativeHost getReactNativeHost() {
        return mDelegate.getReactNativeHost();
    }

    protected final ReactInstanceManager getReactInstanceManager() {
        return mDelegate.getReactInstanceManager();
    }

    protected final void loadApp(String appKey) {
        mDelegate.loadApp(appKey);
    }

    public ReactRootView getRootView() {
        return mDelegate.getRootView();
    }
}

ReactActivityDelegate.java:

// Copyright 2004-present Facebook. All Rights Reserved.

package com.example;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;
import android.support.v4.app.FragmentActivity;
import android.view.KeyEvent;
import android.widget.Toast;

import