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