Как передать параметры компоненту на другом экране в Stack Navigation в реактивном режиме?

Question

У меня есть индексная страница, на которой есть список пользователей, если пользователь нажимает на каждого пользователя, он переходит на экран своего профиля, я могу передать идентификатор для отображения экрана профиля, но проблема в том, что страница профиля состоит из нескольких компоненты, и мне нужно, чтобы полученные данные использовались в компонентах.

Вот как я передаю данные в профиль пользователя:

onPress={() => this.props.navigation.navigate('userProfile',{item})}>

Вот как я получаю его в профиле пользователя:

    export default class UserProfileScreen extends React.Component {

      render() {
        const {item} = this.props.navigation.state.params;
        return (
          <ScrollView>
            <View style={styles.container}>
              <IntroCard item={item}/>
            </View>
          </ScrollView>
}
}

и вот как я получаю данные в <IntroCard> компоненте:

const IntroCard = (props) => {
  return (
    <View>
       <Text>{this.props.item ? this.props.item.id : 'default'}</Text>
    </View>
)}

Но после выполнения всех этих действий я получаю следующую ошибку:

TypeError: TypeError: TypeError: undefined is not an object (evaluating '_this.props.item')

Answer 1

Вы можете передать его как prop компонентам

render(){
  const {item} = this.props.navigation.state.params;
  return (
    <View>
      <Component item={item}/>
    </View>
  )
}

, а затем получить к нему доступ с помощью this.props на Component

<Text>{props.item ? props.item.id : 'print something else'}</Text>