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

时间:2017-05-25 18:05:44

标签: react-native redux react-navigation

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

这是预期的行为吗?我注意到,如果我在这样的navigationOptions中定义headerLeft,它会按预期工作:

new_counter
凸轮有谁解释是什么原因造成的?有没有办法让默认的stackNavigator后退按钮与redux一起工作?

3 个答案:

答案 0 :(得分:1)

也许派遣行动会更好:

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

答案 1 :(得分:1)

你可以在onPress事件上做一件事,在调用goBack()之前你必须为特定的redux发送你的行动:

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

答案 2 :(得分:0)

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

我的后退动作很好地发送了一个“后退”动作但是,在我的reducer中,我错过了getStateForAction方法(状态)的第二个参数

  

getStateForAction(action,state)

     

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

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

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

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