react-native - 反应导航 5(导航到另一个堆栈屏幕)
问题描述
这是我的 appNavigator:我分为 3 个 stackScreen includeHomeStack
和 . 包含注册和登录屏幕,我创建底部选项卡,上面包含 3 个 StackScreenSettingsStack
ProfileStack
AuthStack
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 的底部选项卡)我尝试使用嵌套导航器但不成功。我也尝试使用navigation.navigate('HomeScreen')
,但它不起作用。任何人都可以帮助我=((。谢谢
解决方案
我知道这已经一个月大了,但也许这会对其他人有所帮助。
看起来你很近。在您的 RootStackScreen 中,您有两个屏幕:“Auth”和“App”。听起来您想从“Auth”屏幕转到“App”屏幕。您只需要使用屏幕的名称。
navigation.navigate("App", {screen: "Dashboard"})
推荐阅读
- php - 带有用户输入的 Switch 语句
- python - How can I get the the recursion values to feed into the POWER FUNCTION?
- c++ - C++ struct memory layout for std::vector
- html - Flex-end and start not aligning vertically
- javascript - 悬停 JS/PHP 时更改 img src 属性
- java - M2Crypto 和 java.security 返回不同的签名消息
- php - 自定义帖子类型分类导航
- node.js - Webpack4:多个 UNKNOWN 入口点 + 多个输出
- mysql - 如何在 B 列中找到 2 个值,它们共享同一列 A
- android - 如何在 Flutter 上为 buttonColumn 添加交互性?