提问者:小点点

如何使用道具和导航路线在同一个const函数(反应原生)?


我是个新来的本地人。我试图在const函数中使用道具和导航。我不知道怎么做。

    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=道具=


共1个答案

匿名用户

如果LoggedInPage是Navigator中定义的屏幕之一,则导航道具将自动传递到组件中。然后,您可以使用导航,如soprops。航行导航

你所需要的只是通过你父母的导航道具。

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>
   );

然后你可以用它的名字的方式:

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>
) }