如何在 react-native 的 Stack Navigation 中将参数传递给另一个屏幕中的组件？

Question

我有一个索引页面，其中有一个用户列表，如果用户点击每个用户，它会转到他们的个人资料屏幕，我可以传递 id 来呈现个人资料屏幕，但问题是个人资料页面由几个components ，我需要在组件中使用接收到的数据。

这是我将数据传递给用户个人资料的方式：

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

这是我在 userProfile 中接收它的方式：

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

然后在Component 上使用this.props 访问它

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