Question

当我将LoginScreen放置在选项卡式屏幕中时，我可以成功登录并导航到DashboardScreen。但是从选项卡式屏幕之外调用时，我无法导航至选项卡式屏幕。请尽快提供帮助。

Answer 1

我建议您拆分实际的应用程序导航器和身份验证导航器，并使用如下所示的开关导航器创建一个简单的“身份验证流程”：

登录屏幕示例：

class SignInScreen extends React.Component {


  render() {
    return (
      <View style={styles.container}>
        <Button title="Sign in!" onPress={this._signInAsync} />
      </View>
    );
  }

  _signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate('AuthLoading') // after you sign in navigate to the auth screen
  };
}

授权加载屏幕（创建此屏幕）：

class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

最后是您的App.js：

import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

// you can use tab navigation or stack navigation in the AppStack
const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

在React Native Expo成功登录后如何重定向到仪表板屏幕？

1 个答案: