无法在React Native中跨屏幕导航

Question

我试图在React Native中单击按钮浏览不同的屏幕。代码如下:

App.tsx

import React from "react";
import { StyleSheet, View, Text} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Login from './src/screens/Login/login'
import SignUp from './src/screens/SignUp/signUp'
import { getItem } from './src/utility/AsyncStorage'
export default function App() {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
React.useEffect(() => {
getItem("gmailId").then((value:any) => {setGmailId(value)});
getItem("password").then((value:any) => {setPassword(value)});
}, []);
const RootStack = createNativeStackNavigator();
return (
<View style={styles.container}>
<NavigationContainer>
<RootStack.Navigator initialRouteName="Login">
<RootStack.Screen name="Login" component={Login} />
<RootStack.Screen name="signup" component={SignUp} />
</RootStack.Navigator>
</NavigationContainer>
{/* {(!gmailId && !password)? <Login/>: <Text>Logged In</Text>} */}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});

login.tsx

import React from "react";
import { Text, View, Image, TextInput, TouchableOpacity} from 'react-native';
import { SocialIcon } from 'react-native-elements'

import { loginStyle } from './loginStyle'
import { signIn } from './loginLogic'

const Login = (navigation:any) => {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
const navigateToSignUp = () => {
navigation.navigate('signup')
};
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require( "../../../assets/icon.png")}
/>
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', marginTop: 30}}>
<TextInput
style={styles.input}
placeholder="Enter Gmail Id"
onChangeText={setGmailId}
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
placeholder="Enter your Password"
secureTextEntry={true}
/>
<TouchableOpacity
style={[styles.button, styles.loginButton]}
onPress={()=>signIn(gmailId, password)}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.signupButton]}
onPress={() => navigateToSignUp}>
<Text style={styles.text}>Create New Account</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', width: '95%', margin: 10, marginTop: 25}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{width: 100, textAlign: 'center'}}>Social Login</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
<SocialIcon
style={{width:"85%"}}
title='Sign In With Google'
button
type='google'
onPress={()=>{console.log('Sign In With Google')}}
/>
</View>
)
}
export default Login
//===================== STYLE SECTION =====================
const styles = loginStyle()

SignUp.tsx

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const SignUp = () => {
return (
<View>
<Text>signUp</Text>
</View>
)
}
export default SignUp
const styles = StyleSheet.create({})

我的编码是没有抛出任何错误的屏幕是可见的(甚至initialRoute)。在运行代码时，它只显示一个白页。

请帮我纠正这个问题。

Answer 1

import React from "react";
import { Text, View, Image, TextInput, TouchableOpacity} from 'react-native';
import { SocialIcon } from 'react-native-elements'

import { loginStyle } from './loginStyle'
import { signIn } from './loginLogic'

const Login = ({navigation:any}) => {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
const navigateToSignUp = () => {
navigation.navigate('signup')
};
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require( "../../../assets/icon.png")}
/>
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', marginTop: 30}}>
<TextInput
style={styles.input}
placeholder="Enter Gmail Id"
onChangeText={setGmailId}
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
placeholder="Enter your Password"
secureTextEntry={true}
/>
<TouchableOpacity
style={[styles.button, styles.loginButton]}
onPress={()=>signIn(gmailId, password)}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.signupButton]}
onPress={() => navigateToSignUp}>
<Text style={styles.text}>Create New Account</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', width: '95%', margin: 10, marginTop: 25}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{width: 100, textAlign: 'center'}}>Social Login</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
<SocialIcon
style={{width:"85%"}}
title='Sign In With Google'
button
type='google'
onPress={()=>{console.log('Sign In With Google')}}
/>
</View>
)
}
export default Login

请试一试。

或

import React from "react";
import { Text, View, Image, TextInput, TouchableOpacity} from 'react-native';
import { SocialIcon } from 'react-native-elements'

import { loginStyle } from './loginStyle'
import { signIn } from './loginLogic'

const Login = (props:any) => {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
const navigateToSignUp = () => {
props.navigation.navigate('signup')
};
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require( "../../../assets/icon.png")}
/>
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', marginTop: 30}}>
<TextInput
style={styles.input}
placeholder="Enter Gmail Id"
onChangeText={setGmailId}
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
placeholder="Enter your Password"
secureTextEntry={true}
/>
<TouchableOpacity
style={[styles.button, styles.loginButton]}
onPress={()=>signIn(gmailId, password)}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.signupButton]}
onPress={() => navigateToSignUp}>
<Text style={styles.text}>Create New Account</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', width: '95%', margin: 10, marginTop: 25}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{width: 100, textAlign: 'center'}}>Social Login</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
<SocialIcon
style={{width:"85%"}}
title='Sign In With Google'
button
type='google'
onPress={()=>{console.log('Sign In With Google')}}
/>
</View>
)
}
export default Login

这个肯定对你有帮助

感谢