如何在同一个 const 函数中使用道具和导航路线（反应原生）？

Question

我是 react-native 的新手。我正在尝试在 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>
   );

} 常量 LoggedInPage = 道具 => { 返回 （ 欢迎 {props.name} 更改照片 {this.props.navigation.navigate('registration')}} 样式={styles.submitButton4}> 下一个 ) }

Answer 1

如果您的 LoggedInPage 是在 Navigator 中定义的屏幕之一，那么导航属性会自动传递到您的组件中。然后你可以像这样使用导航props.navigation.navigate

你只需要从你的父母那里传递导航道具。

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