首页 文章

使用redux进行React-Navigation - 嵌套在TabNavigator中的StackNavigator中的后退按钮触发两个导航器中的后退操作

提问于
浏览 次
11

我有redux的反应导航设置 . 我的应用程序包含一个带有登录和内容屏幕的父TabBarNavigator . 内容屏幕本身就是一个包含应用程序主导航的Stack Navigator . redux和navigators的所有其他方面都按预期工作，但StackNavigator上的默认后退按钮也会触发它的父TabBarNavigator返回 .

这是预期的行为吗？我注意到如果我在navigationOptions中定义headerLeft，它会按预期工作：

static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <Button transparent onPress={() => { navigation.goBack(); }}><Text>Back</Text></Button>
      )
    };
  };

Cam有谁解释是什么原因造成的？有没有办法让默认的stackNavigator后退按钮与redux一起使用？

react-native redux react-navigation

3 回答

  • 1

    您可以在 onPress 事件上做一件事，在调用 goBack() 之前，您必须为该特定的redux调度您的操作：

    static navigationOptions = ({ navigation }) => {
return {
  headerLeft: (
    <Button 
        transparent 
        onPress={() => { 
          <ACTION_DISPATCH>
          navigation.goBack(); 
        }}>
        <Text>Back</Text>
   </Button>
  )
};};
    回复于
  • 0

    也许派遣行动会更好：

    onPress={() => {
      navigation.dispatch(NavigationActions.navigate({
        routeName: '<screen name here>'
      }));
    }}
    回复于
  • 1

    在我的情况下，问题有点复杂，因为我使用了反应导航Redux集成 .

    我的后退动作很好地发送了一个"back"动作，但在我的减速器中， getStateForAction 方法（状态） .

    getStateForAction（action，state）https://reactnavigation.org/docs/routers/api#getStateForAction-action-state

    所以，在我的导航redux中，它适用于这个后减速器：

    export const back = (state) => AppNavigator.router.getStateForAction(NavigationActions.back(), state)

    通过此后退操作，嵌套导航器的后退不会重置主导航器 .

    回复于

相关问题