ios - StackNavigation 不向 React Native 添加屏幕

Question

我有当前的屏幕流。

首页 -> 信息 -> 登录 -> 相机。

问题是我不想将登录添加到堆栈中，因为当您从相机返回时，您将返回登录，而不是信息。

如果我从相机使用 this.props.navigate('Info')，那么问题是现在返回到相机而不是从信息回家。请注意，我也不想在登录页面完全删除堆栈，正如我在此处的重置功能 (https://reactnavigation.org/docs/navigators/navigation-actions#Reset) 中看到的那样。

理想情况下我想做的是:

主页 -> 信息 -> 登录(未添加到堆栈)-> 相机。

这是我可以从相机返回到信息，然后从信息返回到主页。

有没有人找到解决这个问题的好方法？

谢谢

Answer 1

如果你想保留整个堆栈和参数，只放弃登录页面，那么你可以使用 Reset Navigation Action在相机页面中:

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: 'Home', params: this.props.navigation.state.params })
    NavigationActions.navigate({ routeName: 'Info', params: this.props.navigation.state.params })
  ]
})
this.props.navigation.dispatch(resetAction)

这样你会:

1. 导航到主页顶部的信息页面，这意味着“后退”按钮将转到主页。
2. 如果需要，保留参数。如果您不这样做，就不要通过它们。

此功能可以添加到任何地方:组件内部/Action Creators 内部/Back 按钮内部。

或者为后退按钮添加相同的代码。在这种情况下，您需要将其添加到 Camera 路由的 navigationOptions 中:

const backButton = ({ navigation }) => ({
        headerLeft: <TouchableOpacity
                    onPress={() => {
                    // the code from above, except for import line and using navigation.whatever instead of this.props.navigation.whatever
                    }}
                ><Text>Back</Text> // this is a text of a back button, you could also use an icon
                </TouchableOpacity>
});

导航器:

const MyStack = StackNavigator({
  home: { screen: Home },
  info: { screen: Info },
  login: { screen: Login },
  camera: { screen: Camera }, navigationOptions: backButton });