[英]How to use props and navigation route in same const function (react native)?
I am new to react-native. I am trying to use props and navigation in a const function. I do not know how to do that.我是 react-native 的新手。我正在尝试在常量 function 中使用道具和导航。我不知道该怎么做。
render() {
return (
<View style={styles.container}>
{this.state.signedIn ? (
<LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} />
) : (
<LoginPage signIn={this.signIn} />
)}
<TouchableOpacity
onPress={() => {this.props.navigation.navigate('About You')}}
style={styles.submitButton4}>
<Text style={styles.buttonText2}> Next </Text>
</TouchableOpacity>
</View>
);
} const LoggedInPage = props => { return ( Welcome {props.name} <Image style={styles.image} source={{ uri: props.photoUrl }} /> Change photo <TouchableOpacity onPress={() => {this.props.navigation.navigate('registration')}} style={styles.submitButton4}> Next ) } } const LoggedInPage = props => { return ( Welcome {props.name} <Image style={styles.image} source={{ uri: props.photoUrl }} /> 更改照片 <TouchableOpacity onPress={() => { this.props.navigation.navigate('registration')}} style={styles.submitButton4}> Next ) }
if your LoggedInPage is one of the screens defined in the Navigator, then the navigation prop is automatically passed into your component.如果您的 LoggedInPage 是导航器中定义的屏幕之一,那么导航道具会自动传递到您的组件中。 you can then use navigation like so
props.navigation.navigate
然后你可以像这样使用导航
props.navigation.navigate
all you need is pass in the navigation prop from your parent.您所需要的只是传递您父母的导航道具。
return (
<View style={styles.container}>
{this.state.signedIn ? (
<LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} navigation={this.props.navigation} />
) : (
<LoginPage signIn={this.signIn} navigation={this.props.navigation} />
)}
<TouchableOpacity
onPress={() => {this.props.navigation.navigate('About You')}}
style={styles.submitButton4}>
<Text style={styles.buttonText2}> Next </Text>
</TouchableOpacity>
</View>
);
then you can use it the name way:然后你可以使用它的名称方式:
const LoggedInPage = props => {
return (
<Text style={styles.text1}>Welcome {props.name}</Text>
<Image style={styles.image} source={{ uri: props.photoUrl }} />
<TouchableOpacity
style={styles.submitButton1}>
<Text style={styles.buttonText3}> Change photo </Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {props.navigation.navigate('registration')}}
style={styles.submitButton4}>
<Text style={styles.buttonText2}> Next </Text>
</TouchableOpacity>
</View>
) }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.