如何跳过/修改导航答案

【问题标题】：How to skip back/modify navigation如何跳过/修改导航
【发布时间】：2019-11-22 11:16:35
【问题描述】：

我有一个很好用的 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,
    },
});

如何实现？

【问题讨论】：

好的，你已经试过了吗？ stackoverflow.com/questions/49477330/…
好的，它适用于 DeviceDetail 中的自定义导航选项。我得到了指向 DeviceList 的左箭头，但我没有实现自定义左箭头标题。它是空白的。任何想法？我已经尝试过“headerBackTitle”...
好的，我找到了：我必须在 headerLeft > HeaderBackButton 参数中添加“title={'custom title'} backTitleVisible={true}”。谢谢。

标签： react-native navigation

【解决方案1】：

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

所以如果你想从DeviceDetail转到DeviceList，你要做的就是将DeviceAdd的密钥向下传递给DeviceDetail，然后用密钥调用goBack()。

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>
    );
}

【讨论】：