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中

扫描二维码关注公众号，回复： 2614311 查看本文章

我们直接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 com.facebook.common.logging.FLog;
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactFragmentActivity;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactRootView;
import com.facebook.react.bridge.Callback;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.devsupport.DoubleTapReloadRecognizer;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.modules.core.PermissionListener;

import javax.annotation.Nullable;

/**
 * Delegate class for {@link ReactActivity} and {@link ReactFragmentActivity}. You can subclass this
 * to provide custom implementations for e.g. {@link #getReactNativeHost()}, if your Application
 * class doesn't implement {@link ReactApplication}.
 */
public class ReactActivityDelegate {

    private final int REQUEST_OVERLAY_PERMISSION_CODE = 1111;
    private static final String REDBOX_PERMISSION_GRANTED_MESSAGE =
            "Overlay permissions have been granted.";
    private static final String REDBOX_PERMISSION_MESSAGE =
            "Overlay permissions needs to be granted in order for react native apps to run in dev mode";

    private final @Nullable
    Activity mActivity;
    private final @Nullable
    FragmentActivity mFragmentActivity;
    private final @Nullable
    String mMainComponentName;

    private @Nullable
    ReactRootView mReactRootView;
    private @Nullable
    DoubleTapReloadRecognizer mDoubleTapReloadRecognizer;
    private @Nullable
    PermissionListener mPermissionListener;
    private @Nullable
    Callback mPermissionsCallback;

    public ReactActivityDelegate(Activity activity, @Nullable String mainComponentName) {
        mActivity = activity;
        mMainComponentName = mainComponentName;
        mFragmentActivity = null;
    }

    public ReactActivityDelegate(
            FragmentActivity fragmentActivity,
            @Nullable String mainComponentName) {
        mFragmentActivity = fragmentActivity;
        mMainComponentName = mainComponentName;
        mActivity = null;
    }

    protected @Nullable
    Bundle getLaunchOptions() {
        return null;
    }

    protected ReactRootView createRootView() {
        return new ReactRootView(getContext());
    }

    /**
     * Get the {@link ReactNativeHost} used by this app. By default, assumes
     * {@link Activity#getApplication()} is an instance of {@link ReactApplication} and calls
     * {@link ReactApplication#getReactNativeHost()}. Override this method if your application class
     * does not implement {@code ReactApplication} or you simply have a different mechanism for
     * storing a {@code ReactNativeHost}, e.g. as a static field somewhere.
     */
    protected ReactNativeHost getReactNativeHost() {
        return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost();
    }

    public ReactInstanceManager getReactInstanceManager() {
        return getReactNativeHost().getReactInstanceManager();
    }

    protected void onCreate(Bundle savedInstanceState) {
        boolean needsOverlayPermission = false;
        if (getReactNativeHost().getUseDeveloperSupport() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            // Get permission to show redbox in dev builds.
            if (!Settings.canDrawOverlays(getContext())) {
                needsOverlayPermission = true;
                Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getContext().getPackageName()));
                FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);
                Toast.makeText(getContext(), REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();
                ((Activity) getContext()).startActivityForResult(serviceIntent, REQUEST_OVERLAY_PERMISSION_CODE);
            }
        }

        if (mMainComponentName != null && !needsOverlayPermission) {
            loadApp(mMainComponentName);
        }
        mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
    }

    protected void loadApp(String appKey) {
        if (mReactRootView != null) {
            throw new IllegalStateException("Cannot loadApp while app is already running.");
        }
        mReactRootView = createRootView();
        mReactRootView.startReactApplication(
                getReactNativeHost().getReactInstanceManager(),
                appKey,
                getLaunchOptions());
//    getPlainActivity().setContentView(mReactRootView);
    }

    protected void onPause() {
        if (getReactNativeHost().hasInstance()) {
            getReactNativeHost().getReactInstanceManager().onHostPause(getPlainActivity());
        }
    }

    protected void onResume() {
        if (getReactNativeHost().hasInstance()) {
            getReactNativeHost().getReactInstanceManager().onHostResume(
                    getPlainActivity(),
                    (DefaultHardwareBackBtnHandler) getPlainActivity());
        }

        if (mPermissionsCallback != null) {
            mPermissionsCallback.invoke();
            mPermissionsCallback = null;
        }
    }

    protected void onDestroy() {
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
            mReactRootView = null;
        }
        if (getReactNativeHost().hasInstance()) {
            getReactNativeHost().getReactInstanceManager().onHostDestroy(getPlainActivity());
        }
    }

    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (getReactNativeHost().hasInstance()) {
            getReactNativeHost().getReactInstanceManager()
                    .onActivityResult(getPlainActivity(), requestCode, resultCode, data);
        } else {
            // Did we request overlay permissions?
            if (requestCode == REQUEST_OVERLAY_PERMISSION_CODE && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (Settings.canDrawOverlays(getContext())) {
                    if (mMainComponentName != null) {
                        loadApp(mMainComponentName);
                    }
                    Toast.makeText(getContext(), REDBOX_PERMISSION_GRANTED_MESSAGE, Toast.LENGTH_LONG).show();
                }
            }
        }
    }

    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (getReactNativeHost().hasInstance() && getReactNativeHost().getUseDeveloperSupport()) {
            if (keyCode == KeyEvent.KEYCODE_MENU) {
                getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();
                return true;
            }
            boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer)
                    .didDoubleTapR(keyCode, getPlainActivity().getCurrentFocus());
            if (didDoubleTapR) {
                getReactNativeHost().getReactInstanceManager().getDevSupportManager().handleReloadJS();
                return true;
            }
        }
        return false;
    }

    public boolean onBackPressed() {
        if (getReactNativeHost().hasInstance()) {
            getReactNativeHost().getReactInstanceManager().onBackPressed();
            return true;
        }
        return false;
    }

    public boolean onNewIntent(Intent intent) {
        if (getReactNativeHost().hasInstance()) {
            getReactNativeHost().getReactInstanceManager().onNewIntent(intent);
            return true;
        }
        return false;
    }

    @TargetApi(Build.VERSION_CODES.M)
    public void requestPermissions(
            String[] permissions,
            int requestCode,
            PermissionListener listener) {
        mPermissionListener = listener;
        getPlainActivity().requestPermissions(permissions, requestCode);
    }

    public void onRequestPermissionsResult(
            final int requestCode,
            final String[] permissions,
            final int[] grantResults) {
        mPermissionsCallback = new Callback() {
            @Override
            public void invoke(Object... args) {
                if (mPermissionListener != null && mPermissionListener.onRequestPermissionsResult(requestCode, permissions, grantResults)) {
                    mPermissionListener = null;
                }
            }
        };
    }

    private Context getContext() {
        if (mActivity != null) {
            return mActivity;
        }
        return Assertions.assertNotNull(mFragmentActivity);
    }

    private Activity getPlainActivity() {
        return ((Activity) getContext());
    }

    public ReactRootView getRootView() {
        return mReactRootView;
    }
}

MainActivity.java

package com.example;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;

import java.util.LinkedList;
import java.util.List;

public class MainActivity extends MyReactActivity implements MyFragmentDelegate {
    private ReactFragment reactFragment;
    private List<Fragment> fragments = new LinkedList<>();

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if (reactFragment == null) {
            reactFragment = new ReactFragment();
            reactFragment.setRootView(getRootView());
        }
        push(reactFragment, "ReactFragment");
    }

    @Override
    public void push(Fragment fragment, String tag) {
        getSupportFragmentManager().beginTransaction().add(R.id.id_main_container, fragment, tag).commit();
    }

    @Override
    public void pop() {
        List<Fragment> fragments = getSupportFragmentManager().getFragments();
        getSupportFragmentManager().beginTransaction().remove(fragments.get(fragments.size()-1)).commit();
    }

    @Override
    public void startRN(String params) {
        List<Fragment> fragments = getSupportFragmentManager().getFragments();
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        for (Fragment fragment : fragments) {
            if (fragment instanceof ReactFragment) {
                fragmentTransaction.show(fragment);
            } else {
                fragmentTransaction.hide(fragment);
            }
        }
        fragmentTransaction.commit();
        RouterModule.startReactPage("login");
    }

    @Override
    public void reactBack() {
        List<Fragment> fragments = getSupportFragmentManager().getFragments();
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        for (Fragment fragment : fragments) {
            fragmentTransaction.show(fragment);
        }
        fragmentTransaction.commit();
    }
}

MyFragmentDelegate.java:

package com.example;

import android.support.v4.app.Fragment;

/**
 * Created by yinqingyang on 2018/5/6.
 */

public interface MyFragmentDelegate {
    void push(Fragment fragment,String tag);
    void pop();
    void startRN(String params);
    void reactBack();
}

好啦!! 贴了一大段代码,我们一点点解释~~~

2、创建一个layout叫activity_main:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/id_main_container"
    >

</FrameLayout>

可以看到,里面就一个FrameLayout

3、创建一个ReactFragment继承Fragment:

package com.example;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by yinqingyang on 2018/5/6.
 */

public class ReactFragment extends Fragment {
    private View rootView;
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return rootView;
    }

    public void setRootView(View rootView) {
        this.rootView = rootView;
    }
}

那么rootView从哪来呢? 还记得开始我说给MyReactActivity跟ReactActivityDelegate提供的getRootView方法没?

4、创建ReactFragment,我们在MainActivity的onCreate方法中创建ReactFragment,然后获取rootview,给ReactFragment,最后把ReactFragment显示到MainActivity中:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if (reactFragment == null) {
            reactFragment = new ReactFragment();
            reactFragment.setRootView(getRootView());
        }
        push(reactFragment, "ReactFragment");
    }
     @Override
    public void push(Fragment fragment, String tag) {
        getSupportFragmentManager().beginTransaction().add(R.id.id_main_container, fragment, tag).commit();
    }

简单的fragment的添加、替换、删除操作我就不解释了哈~~

嗯嗯,到这里我们就可以跑我们的项目了~ (我这里偷了下懒直接用了react-native-router-flux的demo做的演示),小伙伴也可以用自己的demo做演示,跑起来我们就可以看到下面界面:

rn代码:

 <Button title="跳转到原生的页面" onPress={() => {
                    //调用原生的startNative开启一个原生页面
                    NativeModules.RouterModule.startNative({title: '原生页面'});
                }}/>
                <Button title="Back" onPress={() => {
                    //rn返回的时候调用原生的reactBack方法
                    NativeModules.RouterModule.reactBack();
                    Actions.pop();
                }}/>

5、封装原生NativeModules模块供rn调用:

package com.example;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;

/**
 * Created by yinqingyang on 2018/5/6.
 */

public class RouterModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactApplicationContext;
    public RouterModule(ReactApplicationContext reactContext) {
        super(reactContext);
        reactApplicationContext=reactContext;
    }

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

    /**
     * 跳转到原生页面
     * @param data
     * @param callback
     */
    @ReactMethod
    public void startNative(ReadableMap data, Promise callback) {
        if(getCurrentActivity() instanceof MyFragmentDelegate){
            MyFragmentDelegate fragmentDelegate= (MyFragmentDelegate) getCurrentActivity();
            //调用push方法，添加一个fragment到activity
            fragmentDelegate.push(new PlusOneFragment(),"PlusOneFragment");
        }
    }

    /**
     * rn点击返回的时候
     */
    @ReactMethod
    public void reactBack() {
        if(getCurrentActivity() instanceof MyFragmentDelegate){
            //调用reactBack方法，使所有的fragment可见
            MyFragmentDelegate fragmentDelegate= (MyFragmentDelegate) getCurrentActivity();
            fragmentDelegate.reactBack();
        }
    }

    /**
     * 原生跳转rn页面
     * @param params
     */
    public static void startReactPage(String params){
        reactApplicationContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("ACTION_PAGE", params);
    }
}

然后创建AndroidModulePackage把module添加进去,最后把AndroidModulePackage添加到Application中:

package com.example;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * Created by yinqingyang on 2018/5/6.
 */

public class AndroidModulePackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> nativeModules = new ArrayList<>();
        nativeModules.add(new RouterModule(reactContext));
        return nativeModules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Application.java

package com.example;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new AndroidModulePackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

最后我会把工程上传到github,先结合我们操作一起说一下代码:

rn页面:

点击跳转到原生页面:

rn代码:

<Button title="跳转到原生的页面" onPress={() => {
                    //调用原生的startNative开启一个原生页面
                    NativeModules.RouterModule.startNative({title: '原生页面'});
                }}/>

原生代码;

/**
     * 跳转到原生页面
     * @param data
     * @param callback
     */
    @ReactMethod
    public void startNative(ReadableMap data, Promise callback) {
        if(getCurrentActivity() instanceof MyFragmentDelegate){
            MyFragmentDelegate fragmentDelegate= (MyFragmentDelegate) getCurrentActivity();
            //调用push方法，添加一个fragment到activity
            fragmentDelegate.push(new PlusOneFragment(),"PlusOneFragment");
        }
    }

 @Override
    public void push(Fragment fragment, String tag) {
        getSupportFragmentManager().beginTransaction().add(R.id.id_main_container, fragment, tag).commit();
    }

很简单,就是添加了一个fragment到activity中, 所以现在activity的fragment中有(ReactFragment,PlusOneFragment)两个fragment.

继续操作,然后从PlusOneFragment:

点击按钮跳转到新的rn页面:

对应代码:

 @Override
    public void onClick(View v) {
        if (v.getId() == R.id.button1) {
        // 跳转rn页面
            myFragmentDelegate.startRN("login");
        }else if(v.getId() == R.id.button2){
        //返回
            myFragmentDelegate.pop();
        }
    }

@Override
    public void startRN(String params) {
        //获取所有的fragment
        List<Fragment> fragments = getSupportFragmentManager().getFragments();
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        //遍历所有的fragment
        for (Fragment fragment : fragments) {
            //当为ReactFragment的时候，显示
            if (fragment instanceof ReactFragment) {
                fragmentTransaction.show(fragment);
            } else {
                //隐藏除ReactFragment以外的所有fragment
                fragmentTransaction.hide(fragment);
            }
        }
        fragmentTransaction.commit();
        //发通知rn跳转页面
        RouterModule.startReactPage("login");
    }
    /**
     * 原生跳转rn页面
     * @param params
     */
    public static void startReactPage(String params){
        reactApplicationContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("ACTION_PAGE", params);
    }

rn代码:

class Launch extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        //监听原生
        DeviceEventEmitter.addListener('ACTION_PAGE',()=>{
            //跳转一个新页面
            Actions.launch();
        })
    }

然后rn新的页面点击“back“按钮:

先让原生把所有的fragment都设置成显示状态,然后rn自己pop页面

 <Button title="Back" onPress={() => {
                    //rn返回的时候调用原生的reactBack方法
                    NativeModules.RouterModule.reactBack();
                    Actions.pop();
                }}/>

原生代码:

/**
     * rn点击返回的时候
     */
    @ReactMethod
    public void reactBack() {
        if(getCurrentActivity() instanceof MyFragmentDelegate){
            //调用reactBack方法，使所有的fragment可见
            MyFragmentDelegate fragmentDelegate= (MyFragmentDelegate) getCurrentActivity();
            fragmentDelegate.reactBack();
        }
    }

    @Override
    public void reactBack() {
        List<Fragment> fragments = getSupportFragmentManager().getFragments();
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        for (Fragment fragment : fragments) {
            fragmentTransaction.show(fragment);
        }
        fragmentTransaction.commit();
    }

然后原生页面继续点击“返回按钮“:

原生移除最后一个fragment

@Override
    public void pop() {
        List<Fragment> fragments = getSupportFragmentManager().getFragments();
        getSupportFragmentManager().beginTransaction().remove(fragments.get(fragments.size()-1)).commit();
    }

好啦!!! 我们全部的跳转就解释完成了,我这只是一个简单的思路哈~ 小伙伴可不要直接拖代码到项目,真正的项目中情况比我这复杂多了小伙伴还有啥好的思路可以一起share一下哦 欢迎入群欢迎交流~~~

最后附上项目github地址:
https://github.com/913453448/rn-router-demo