Question

我想问问这是否可行，基本上我要实现的是在成功通过身份验证后更改同一选项卡上的屏幕：

这是我的BottomTabNavigator，具有5个标签。登录Login Tab后，我想将同一标签的屏幕更改为个人资料屏幕。我该如何实现？

const MainTabNavigator = createBottomTabNavigator(
  {
    Home: SearchNavigator,
    Appointments: AppointmentsNavigator,
    Doctors: DoctorsNavigator,
    Login: LoginNavigator,
    Notifications: NotificationsNavigator
  },
  {
    tabBarOptions: {
      showIcon: true,
      activeTintColor: PURPLE_COLOR,
      inactiveTintColor: DARK_GRAY_COLOR
    }
  }
)

Answer 1

成功登录后，您可以在组件中使用navigation.navigate道具。

示例：

class Login extends Component {
  handleLogIn = () => {
    fetch('http://some-login-url', 'POST')
      .then(r => r.json())
      .then(() => this.props.navigation.navigate('Home'));
  }

  render() {
    return (
      <TouchableOpacity onPress={this.handleLogIn}>
        <Text>Log In</Text>
      </TouchableOpacity>
    );
  }
}

但是，对于身份验证流程而言，使用TabNavigator方法并不简单。考虑将SwitchNavigator与TabNavigator结合使用，如official docs中所述。

验证后更改特定标签-反应导航

1 个答案: