StackNavigation不会将屏幕添加到堆栈React Native
问题描述:
我拥有当前的屏幕流。StackNavigation不会将屏幕添加到堆栈React Native
首页 - >信息 - >登录 - >相机。
问题是我不想将登录名添加到堆栈中,因为当您从相机返回时,您将返回登录,而不是信息。
如果我使用this.props.navigate('Info')
从相机,那么问题是现在回到相机,而不是从信息回家。注意我也不想在登录页面完成删除堆栈,就像我在这里看到使用复位功能(https://reactnavigation.org/docs/navigators/navigation-actions#Reset)。
理想我想怎样做是:
首页 - >信息 - >登录(不添加到堆) - >摄像头。
这是我可以从相机到信息和从信息回到家。
有没有人找到一个很好的解决方法呢?
感谢
答
如果你想保留的全部筹码,而params,仅开沟登录页面,那么你既可以在摄像机页面使用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)
这样,您将:
- 导航到主页顶部的信息页面,这意味着后退按钮将导致主页。
- 如果需要,请保留参数。如果你不只是不通过它们。
此功能可以添加到任何位置:组件内部/动作创作者/内部后退按钮。
或者为后退按钮添加相同的代码。在这种情况下,你需要把它添加到相机路径的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 });
我能问为什么“重置”是不是正在考虑这种情况?我想你可能会过度复杂的应用程序流或误解React-Navigation库。 – Eduard
将重置删除整个堆栈还是仅删除最后一个登录页面?谢谢 – SwimmingG
@Eduard它会删除整个堆栈,但您可以直接重新创建堆栈,省略登录页面。如果这就是你想要做的,我可以告诉你如何。 – Eduard