React 导航 5(导航到另一个堆栈屏幕)
2020-05-19
5067
这是我的 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)我尝试使用嵌套导航器,但没有成功。我也尝试使用
navigation.navigate('HomeScreen')
,但它不起作用。有人能帮助我 =((。谢谢
1个回答
我知道这是一个月前的事了,但也许这会对其他人有所帮助。
看起来你已经接近目标了。在你的 RootStackScreen 中,你有两个屏幕:“Auth”和“App”。听起来你想从“Auth”屏幕转到“App”屏幕。你只需要使用屏幕的名称。
navigation.navigate("App", {screen: "Dashboard"})
user13848906
2020-07-01