[英]How to navigate from one screen to another in React native?
When I click on Sign Up button I want to navigate to Sign up page but it did not work.当我点击注册按钮时,我想导航到注册页面,但它不起作用。 I have imported the screens and navigated screen also to app.js file.
我已将屏幕和导航屏幕也导入到 app.js 文件中。 I am getting an ReferenceError: Can't find variable: navigation.
我收到 ReferenceError:找不到变量:导航。 Also I am unable to insert background image?
我也无法插入背景图片? Below is the Sign Up page.
下面是注册页面。
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>
);
}
}
});
onPress
handler does not getting called with navigation
as the first parameter. onPress
处理程序不会以navigation
作为第一个参数来调用。 That is undefined
.那是
undefined
的。 navigation
is a prop to your class component which is provided by stack navigator setup. navigation
是堆栈导航器设置提供的 class 组件的道具。
Instead of代替
onPress = {(navigation) => navigation.navigate('Sign Up')}
use利用
onPress = {() => this.props.navigation.navigate('Sign Up')}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.