无法在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()

ignup.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({})

我的编码没有丢弃任何错误，但都看不到任何屏幕（甚至都不是初始路线）。运行代码时，它仅显示一个白页。

请帮助我纠正这个问题。

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

这肯定会帮助您

感谢