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

淩亂°似流年 2022-05-25 02:25 462阅读 0赞

**前言:做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)

效果如图所示:  
![这里写图片描述][70]

我们先点击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 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做演示,跑起来我们就可以看到下面界面:  
![这里写图片描述][70 1]

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页面:  
![这里写图片描述][70 2]

点击跳转到原生页面:  
![这里写图片描述][70 3]

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:  
![这里写图片描述][70 3]

点击按钮跳转到新的rn页面:  
![这里写图片描述][70 2]

对应代码:

@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();
        }

然后原生页面继续点击“返回按钮“:  
![这里写图片描述][70 3]

原生移除最后一个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][https_github.com_913453448_rn-router-demo]

[70]: /images/20220525/c53eaba9f9a8455ea4be584d6975a5e2.png
[70 1]: /images/20220525/4a270d752a8e473b96fd8e014e24d14a.png
[70 2]: /images/20220525/38cb65f0f00c48d894b17774d42b45e1.png
[70 3]: /images/20220525/559115d2a6944fa29ad8b2c5bd6f88e4.png
[https_github.com_913453448_rn-router-demo]: https://github.com/913453448/rn-router-demo