React Navigation v5：如何使用 redux thunk/redux saga 进行导航？答案

【问题标题】：React Navigation v5: How to navigate using redux thunk/redux saga?React Navigation v5：如何使用 redux thunk/redux saga 进行导航？
【发布时间】：2020-10-30 09:16:26
【问题描述】：

如何在 Redux-Saga 和 Redux-Thunk 中导航 react-navigation 中的屏幕？是否可以在 sagas 或 thunk 中访问navigation context？

例如在 redux-thunk 中

import { StackActions } from '@react-navigation/native';

dispatch(StackActions.replace('Profile', {
    user: 'jane',
}))

或者，在 redux-sagas 中

import { StackActions } from '@react-navigation/native';
import { put } from 'redux-saga/effects';

yield put(StackActions.replace('Profile', {
    user: 'jane',
}))

【问题讨论】：

标签： react-native react-redux redux-saga redux-thunk react-navigation-v5

【解决方案1】：

您必须使用'@react-navigation/compat' 库。

import { createStackNavigator } from '@react-navigation/stack';
import { createCompatNavigatorFactory } from '@react-navigation/compat';
const RootStack = createCompatNavigatorFactory(createStackNavigator)(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
  },
  {
    initialRouteName: 'Profile',
  }
);

import { StackActions } from '@react-navigation/compat';

dispatch(StackActions.replace('Profile', {
    user: 'jane',
}))

更多信息请查看link

【讨论】：