如何在 React Native 中从一个屏幕导航到另一个屏幕？

Posted 2023-04-13

【中文标题】如何在 React Native 中从一个屏幕导航到另一个屏幕？

【英文标题】：How to navigate from one screen to another in React native?

【发布时间】：2022-01-22 13:01:40

【问题描述】：

当我点击注册按钮时，我想导航到注册页面，但它不起作用。我已将屏幕和导航屏幕也导入到 app.js 文件中。我收到一个 ReferenceError：找不到变量：导航。我也无法插入背景图片？下面是注册页面。

import React from 'react';
import  StyleSheet,ImageBackground,Text, View, TextInput, TouchableOpacity  from   'react-native';
let bgImage='../../resources/images/bg2.png'
export default class LoginScreen extends React.Component 
      state=
        email:"",
        password:"",
      
      render()
        return (
        <View style=styles.container>
            <Text style=styles.logo>Trollo</Text>
           <View style=styles.box>
            <View style=styles.inputView >
              <TextInput
                style=styles.inputText
                placeholder="Email"
                placeholderTextColor="#808080"
                onChangeText=text => this.setState(email:text)/>
            </View>
            <View style=styles.inputView >
              <TextInput
                secureTextEntry
                style=styles.inputText
                placeholder="Password"
                placeholderTextColor="#808080"
                onChangeText=text => this.setState(password:text)/>
           </View>
            <TouchableOpacity style=styles.loginBtn>
               <Text style=styles.loginText>SIGN IN</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style=styles.forgot>Forgot Password?</Text>
            </TouchableOpacity>
           </View>
            <Text style=styles.text1>New Here?</Text>
            <TouchableOpacity style=styles.signupBtn onPress = (navigation) => navigation.navigate('Sign Up')>
              <Text style=styles.loginText>SIGN UP</Text>
            </TouchableOpacity>
            <Text style=styles.logoText>Trollo</Text>
        </View>
        );
      
    


);

【问题讨论】：

meka balanna ***.com/questions/45875496/…

这能回答你的问题吗？ How to navigate from one screen to another scree in react native>?

我试过了，还是不行

你在哪里打电话给navigation.navigate？能否请您添加与错误相关的代码？

我输入密码！现在检查！ @AmilaSenadheera

【参考方案1】：

onPress 处理程序不会以navigation 作为第一个参数被调用。那是undefined。 navigation 是您的类组件的道具，由堆栈导航器设置提供。

代替

onPress = (navigation) => navigation.navigate('Sign Up')

使用

onPress = () => this.props.navigation.navigate('Sign Up')

【讨论】：

@Hiruni Liyanage，看看这个！！

我试过这个但是出现错误？？？ ibb.co/mXXJGdj

我删除了渲染然后出现这个错误？ ibb.co/9qzRx4J

似乎您已将组件更改为功能组件。需要删除this.props。使用onPress = () => navigation.navigate('Sign Up')

成功了，谢谢