Question

我正在使用react-navigation和基本StackNavigator来解决问题，我希望在保留初始呈现的同时导航回HomeScreen组件而不是＆＃34;重置＆＃34;它。在点击goBack()之前，它会与多个HomeScreen来电进行比较，但在一个导航中。

应用程序结构：

- StackNavigator
  - HomeScreen
  - ChannelScreen
  - VideoScreen

ChannelScreen上有循环导航，您可以在其中点击其他相关部分，然后转到另一个ChannelScreen。

很快，StackNavigator变为：HomeScreen =＆gt; ChannelScreen =＆GT; ChannelScreen =＆GT; ChannelScreen =＆gt; etc...

我们想要一种简单的方法从任何HomeScreen返回ChannelScreen，因此我采用了基本的reset操作：

export const resetStackNavigate = (navigation, routeName, params = {}) => {
  const resetAction = NavigationActions.reset({
    index: 0,
    params,
    actions: [
      NavigationActions.navigate({ routeName })
    ]
  })
  navigation.dispatch(resetAction);
}

效果非常好，除了重置导致堆栈重置＆＃34;所以初始HomeScreen已卸载并重新安装，并且必须重新加载所有组件/图像/等。

我还尝试将HomeScreen state.key（看起来像Init-id-1513113862825-1）传递给ChannelScreen并使用：< / p>

this.props.navigation.goBack(this.props.navigation.state.params.homeScreenKey);

和

this.props.navigation.dispatch(NavigationActions.back({ key: this.props.navigation.state.params.homeScreenKey }));

两者都没有做任何事。

有没有办法回到HomeScreen但保留初始屏幕？

Answer 1

我通过将导航中的第一个ChannelScreen this.props.navigation.state.key缓存到子ChannelsScreens来解决了这个问题：

class SomeComponent extends Component {
    _navigateToHome = () => {
        const { backKey } = this.props.navigation.state.params;
        this.props.navigation.goBack(backKey);
    }

    _navigateToChannel = () => {
        let { backKey } = this.props.navigation.state.params;
        if(!backKey) {
            backKey = this.props.navigation.state.key
        }
        navigate('Channel', { backKey });
    }

    render() {
        return (
            <View>
                {/* the link to another Channel */}
                <TouchableOpacity onPress={this._navigateToChannel}>
                    {/* ... */}
                </TouchableOpacity>

                {/* Return to HomeScreen */}
                <TouchableOpacity onPress={this._navigateToHome}>
                    {/* ... */}
                </TouchableOpacity>
            </View>
        )
    }
}

如果您在第一个ChannelScreen，backKey将 null ，因此只会调用.goBack()。在随后的每个ChannelScreen上传递第一个ChannelScreen key，允许.goBack(key)将我们导航回HomeScreen。

反应导航壁球导航堆栈但保留渲染？

1 个答案: