时间戳

首页 > 解决方案 > 如何在同一个 const 函数中使用道具和导航路线（反应原生）？

reactjs - 如何在同一个 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 = props => { return ( Welcome {props.name} <Image style={styles.image} source={{ uri: props.photoUrl }} /> 更改照片 <TouchableOpacity onPress={() => { this.props.navigation.navigate('registration')}} style={styles.submitButton4}> Next ) }

标签： reactjsreact-native

解决方案

如果您的 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>
) }

推荐阅读