如何在 React Native 中导航

Question

什么时候，你点击文本“创建一个新的”或“登录”你可以切换屏幕一次然后回到原来的，但它停止工作直到看到 AndoidToast 但它不会切换回来，我正在使用 expo bdw。

是否有任何必须导入的库或代码有问题，我在 react-navigation 上找到了这个。

有index.js

import React from 'react';
import { Text, View, StyleSheet, TextInput, Button, ToastAndroid } from 'react-native';
//import Icon from 'react-native-vector-icons/FontAwesome';
//import { Button } from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import { initializeApp } from "firebase/app";
import { getDatabase, ref, set,  } from "firebase/database";
const Stack = createNativeStackNavigator();
const firebaseConfig = {
  // we aint doing that
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);


// set(ref(db, 'users/' + "userId"), {
//     username: "name",
//     email: "email",
//     profile_picture : "imageUrl"
//   });

ToastAndroid.show("app started", ToastAndroid.SHORT);




const MainSceen = ({ navigation }) => {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={LoginSceen}
          options={{ title: 'Login' }}
        />
        <Stack.Screen
          name="SignUp"
          component={SignupScreeen}
          options={{ title: 'SignUp' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}







const LoginSceen = ({ navigation }) => {
  // function signup() {
  //   // signup button..
  //   ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
  //   usersRef.set({
  //     alanisawesome: {
  //       date_of_birth: 'June 23, 1912',
  //       full_name: 'Alan Turing'
  //     },
  // }

  handleClick = () => {
         ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
         navigation.navigate("SignUp")
          }
  return (
    <View>
      <Text style={styles.title1}>LogIn</Text>
      <Text style={styles.text2}>Username</Text>
      <TextInput style={styles.input} placeholder="John" />
      <Text style={styles.text3}>Password</Text>
      <TextInput style={styles.input} placeholder="********" />
      <Text style={styles.text4}>You dont have an account yet? <Text style={styles.link1} onPress={() => handleClick(this)} >Create One.</Text> </Text>
      <View style={styles.button1}>
        <Button style={styles.button2} title="LogIn"     />
      </View>

    </View>
  )
}
const SignupScreeen = ({ navigation }) => {
  // function signup() {
  //   // signup button..
  //   ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
  //   usersRef.set({
  //     alanisawesome: {
  //       date_of_birth: 'June 23, 1912',
  //       full_name: 'Alan Turing'
  //     },
  // }

  handleClick = () => {
         ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
         navigation.navigate("Login")
          }
  return (
    <View>
      <Text style={styles.title1}>SignUp</Text>
      <Text style={styles.text2}>Username</Text>
      <TextInput style={styles.input} placeholder="John" />
      <Text style={styles.text3}>Password</Text>
      <TextInput style={styles.input} placeholder="********" />
      <Text style={styles.text4}>You alrady have an account? <Text  onPress={() => handleClick(this)} style={styles.link1} >Login.</Text> </Text>
      <View style={styles.button1}>
        <Button style={styles.button2} title="LogIn"     />
      </View>

    </View>
  )
}

const styles = StyleSheet.create({


// i deleted style BCS it was to much code to post in StackOverflow
  

  
});

export default MainSceen;

Answer 1

做这个

<Text style={styles.text4}>You alrady have an account? <Text  onPress={() => navigation.navigate("Login")} style={styles.link1} >Login.</Text> </Text>

或者

const handleClick = () =>{
    ToastAndroid.show("Clicked!", ToastAndroid.SHORT);
    navigation.navigate("Login")
}

<Text style={styles.text4}>You alrady have an account? <Text  onPress={() => handleClick()} style={styles.link1} >Login.</Text> </Text>