如何切换到不同的选项卡并重置 React Native 中 TabNavigator 中的所有选项卡

Question

这已经以许多不同的形式被问到，我搜索了整个星期但无法弄清楚如何在下面的设置中从 Connect 导航回 Devices。

const HomeStack = createStackNavigator({
    Devices: DevicesScreen,
    Details: DetailsScreen, // go here
})

const NewDeviceStack = createStackNavigator({
    Start: StartScreen,
    Connect: ConnectScreen, // start here
})

const BottomTabs = createBottomTabNavigator(
{
    Home: { screen: HomeStack },
    Settings: { screen: NewDeviceStack },
}

export default createAppContainer(BottomTabs);

从 Connect 屏幕，此代码尝试重置当前堆栈并返回到 Devices

const resetAction = StackActions.reset({
        index: 0,
        key: null,
        actions: [
            NavigationActions.navigate({routeName: 'Devices'})
            ],
        })
this.props.navigation.dispatch(resetAction)

这失败了：

Error: There is no route defined for key Devices.
Must be one of: 'Start','Connect'

Answer 1

使用 navigation 道具，点击按钮导航到设备屏幕

this.props.navigation.navigate('Devices')

或者只创建一个函数来处理导航

goToScreen = (routeName, params = {}) => {

  const navigateAction = NavigationActions.navigate({
    routeName: routeName,

    params: params, // parameter

    action: NavigationActions.navigate({ routeName: routeName }), // screen you want to navigate to
  });

  this.props.navigation.dispatch(navigateAction);

};