react-native - 如何跳过/修改导航

Question

我有一个很好用的 stackNavigation。3 个屏幕：DeviceList / DeviceDetail / DevideAdd。正常路径是 (1) DeviceList > DeviceDetail 或 (2) DeviceList > DeviceAdd > DeviceDetail。

但是当用户使用路径 (2) 时，我希望 DeviceDetail 屏幕的后退按钮转到 DeviceList。或者目前，它会使用 DevideAdd。

这是我的导航：

const DeviceStackNavigator = createStackNavigator({
    DeviceList: {
        screen: DeviceList,
    },
    DeviceDetail: {
        screen: DeviceDetail,
    },
    DeviceAdd: {
        screen: DeviceAdd,
    },
});

如何实现呢？

标签： react-nativenavigation

Answer 1

关键属性 ' goBack()' 是一个动态生成的字符串，每次导航到新的 ' react-navigation' 路径时都会创建该字符串。

所以如果你想从DeviceDetailto DeviceList，你要做的就是把DeviceAdddown 的 key 传递给DeviceDetail，然后goBack()用 key 调用。

DeviceAdd.js

render() {
    const { state, navigate } = this.props.navigation;    

    return (
        <View>
            <Button title="Go to DeviceDetail" onPress={ () => {
                navigate('DeviceDetail', { go_back_key: state.key });
            }} />
        </View>
    );
}

DeviceDetail.js

render() {
    const { state, goBack } = this.props.navigation;    
    const params = state.params || {};

    return (
        <View>
            <Button title="Back to DeviceList" onPress={ () => {
                goBack(params.go_back_key);
            }} />
        </View>
    );
}