Question

我按照以下方式组织我的应用：

堆栈导航器：
- 登录界面
- 注册屏幕
- 标签导航器
  - 主屏幕
  - 其他屏幕

然而，当我运行它时，弹出的第一个屏幕是主页，即使我设置了 initialRouteName="Login"。此外，单击后退按钮会转到登录屏幕，但单击后按钮不再起作用。

相关代码如下：

return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Login">
                <Stack.Screen name="Login" component={telaLogin} options={{ headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
                <Stack.Screen name="Cadastro" component={telaCadastro} options={{headerStyle: {backgroundColor: "#766ec5", borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
                <Stack.Screen name="Home" component={homeTabs} options={{ headerTitle: props => <LogoTitle {...props} />, headerTitleAlign: 'center', headerTintColor: "#d9d9d9", headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}}}/>
            </Stack.Navigator>
        </NavigationContainer>
    )

function telaLogin({navigation}){
    return(
        <View style={styles.container}>
            <Image style={styles.logo1} source={logo} />
            <TextInput style={styles.txtinput} placeholder='Nome de usuário' placeholderTextColor='#d9d9d9' />
            <TextInput style={styles.txtinput} placeholder='Senha' placeholderTextColor='#d9d9d9' secureTextEntry = {true} />
            <TouchableOpacity style={styles.butao} onPress={navigation.navigate("Home")}> //this button specifically, it doesn't do anything
                <Text style={styles.txtbotao}> Entrar </Text>
            </TouchableOpacity>
             ...

function homeTabs({navigation}){
    return(
        <Tab.Navigator tabBarOptions={{showLabel: false, activeBackgroundColor: '#a5a7a7', inactiveBackgroundColor: '#d9d9d9', activeTintColor: '#766ec5',}} >
            <Tab.Screen name="Gerenciar Turmas" component={telaGerenciarTurmas} options={() => ({
                ...
            <Tab.Screen name="Preparação Para o Conselho" component={telaPrepConselho} options={() => ({
                ...
            <Tab.Screen name="Visualizar Estatísticas" component={telaVisualizarEstat} options={() => ({
                ...
        </Tab.Navigator>
    );
}

Answer 1

您可以使用 react-navigation 文档中的授权流程示例进行身份验证屏幕可视化逻辑：https://reactnavigation.org/docs/auth-flow/

使用嵌套导航器时，initialRouteName 无法正常工作

1 个答案: