react-native - React 导航 5(导航到另一个堆栈屏幕)

Question

这是我的 appNavigator:我分为 3 个 stackScreen，包括 HomeStack、SettingsStack 和 ProfileStack。 AuthStack 包含 SignUp 和 Signin Screen，我创建的底部选项卡包含上面的 3 个 StackScreen

const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator headerMode="none">
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();
function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}
const ProfileStack = createStackNavigator();
function ProfileStackScreen({navigation}) {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
    </ProfileStack.Navigator>
  );
}

// ** AUTH ** //
const AuthStack = createStackNavigator();
function AuthStackScreen() {
  return (
    <AuthStack.Navigator headerMode="none">
      <AuthStack.Screen name="SignIn" component={LoginScreen} />
      <AuthStack.Screen name="SignUp" component={SignUpScreen} />
    </AuthStack.Navigator>
  );
}
// ** APP ** //
const AppStack = createBottomTabNavigator();
function AppStackScreen() {
  return (
    <AppStack.Navigator name="mainApp">
      <AppStack.Screen name="Dashboard" component={HomeStackScreen} />
      <AppStack.Screen name="Favorite" component={SettingsStackScreen} />
      <AppStack.Screen name="Profile" component={ProfileStackScreen} />
    </AppStack.Navigator>
  );
}
// ** ROOT ** //
const RootStack = createStackNavigator();
const RootStackScreen = ({userToken}) => {
  return (
    <RootStack.Navigator headerMode="none">
        <RootStack.Screen name="Auth" component={AuthStackScreen} />
        <RootStack.Screen name="App" component={AppStackScreen} />
    </RootStack.Navigator>
  );
};

export default function AppNavigator() {
  const [loading, setloading] = React.useState(true);
  const [userToken, setUserToken] = React.useState();

  React.useEffect(() => {
    setTimeout(() => {
      setloading(false);
    }, 1000);
  });
  if (loading) {
    return <SplashScreen />;
  }

  // })
  return (
    <NavigationContainer>
      <RootStackScreen />
    </NavigationContainer>
  );
}

这是我的登录界面:

const LoginScreen = ({ navigation, props }) => {
    console.tron.log("debug: LoginScreen -> props", props, navigation)
    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('');
    const [error, setError] = React.useState('');
    const [loading, setLoading] =React.useState(false)

    const handleLogin = () => {
        if (email === '' && password === '') {
            Alert.alert('Enter details to signin!')
        } else {
        setLoading(true)
            firebase
                .auth()
                .signInWithEmailAndPassword(email,password)
                .then((res) => {
                    console.log(res)
                    console.log('User logged-in successfully!')
                    setLoading(false)
                    setEmail('')
                    setPassword('')
                    navigation.navigate("AppStack", {screen: "Dashboard"})
                })
                .catch(error => setError(error.message))
        }
    }

    return (
        <ImageBackground source={require('../images/background.jpg')} style={styles.imageBack}>
            <View style={styles.area1}>
                <Image
                    source={require('../images/vaccines.png')}
                    style={styles.logo} />
                <View style={styles.box}>
                    <TextInput
                        placeholder='Email'
                        onChangeText={email => setEmail(email)}
                        value={email}
                        maxLength={15}
                    />
                </View>
                <View style={styles.box}>
                    <TextInput
                        placeholder='Password'
                        secureTextEntry={true}
                        onChangeText={password => setPassword(password)}
                        value={password}
                        maxLength={15}
                    />
                </View>
                <BlockIcon />
                <TouchableOpacity style={styles.buttonLogin} onPress={handleLogin}>
                    <Text style={styles.text1}>Sign In</Text>
                </TouchableOpacity>
                <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 50 }}>
                    <Text style={styles.text2}> If you don't have an account ?</Text>
                    <TouchableOpacity onPress={() => navigation.push('SignUp')}>
                        <Text style={styles.text3}> Sign Up </Text>
                    </TouchableOpacity>
                </View>

            </View>
        </ImageBackground>
    )
}

我在 navigation.navigate("AppStack", {screen: "Dashboard"}) 导航当我登录成功时。我想导航到 AppStack(初始屏幕名称为 Dasboard 的 bottomtab) 我尝试使用嵌套导航器但不成功。我也尝试使用 navigation.navigate('HomeScreen')，但它不起作用。任何人都可以帮助我 =((。谢谢

Answer 1

我知道这已经一个月了，但也许这会对其他人有所帮助。

看起来你很接近。在您的 RootStackScreen 中，您有两个屏幕:“Auth”和“App”。听起来您想从“Auth”屏幕转到“App”屏幕。您只需要使用屏幕的名称即可。

navigation.navigate("App", {screen: "Dashboard"})