Question

我有当前的屏幕流。

主页 - ＆gt;信息 - ＆gt;登录 - ＆gt;相机。

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

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

理想情况下，我想做的是：

主页 - ＆gt;信息 - ＆gt;登录（未添加到堆栈） - ＆gt;相机。

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

有没有人找到一个很好的方法呢？

谢谢

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)

这样你就会：

导航到主页顶部的信息页面，这意味着返回按钮将指向主页。
如果需要，保留params。如果你不想通过它们。

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

或者为“后退”按钮添加相同的代码。在这种情况下，您需要将其添加到Camera route的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 });

StackNavigation不会添加屏幕来堆叠React Native

1 个答案: