javascript - RN - 更改 parent 的 screenProps

Question

我正在使用 StackNavigator 开发 React Native 菜单。如果用户按下 ListItem，则应将 id 传递到此菜单中的所有其他选项卡，以便可以从 API 获取数据。我尝试使用 screenProps 来传递数据。不幸的是，当按下 ListItem 时，我无法重置该值。

export default class Index extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <OrderScreen
          screenProps={ { Number: 123 } }
      />
    );
  }
}

在子组件中，我可以访问该 Prop ，但不能重新分配它:

export default class ListThumbnailExample extends Component
{
  constructor(props)
  {
    super(props);
    const{screenProps} = this.props;
    this.state = { epNummer: screenProps.Number };
  }

  render()
  {
    return ( 
      <Content>
      <List>
      {
        this.state.orders.map(data => ( 
        <ListItem key = {data.Number}
          onPress = {() =>
            {
              this.props.screenProps.Number = data.Number;
              this.props.navigation.navigate('Orders')
            }
          }
          <Text>{ data.name }</Text> 
        </ListItem >
        ))
      }
      </List>  
    </Content >
    );
  }
}

谢谢!

Answer 1

在 React 和 React-native 中，props 在设计上是不可变的: https://reactjs.org/docs/components-and-props.html#props-are-read-only

在您的情况下，如果您想传递特定于屏幕的数据，您可能想尝试将它们传递到 navigation.navigate() 函数的参数中，如下所示:

 this.props.navigation.navigate('Orders',data.Number)

然后您可以在“订单”屏幕中访问它们:props.navigation.state.params

更多信息请点击:https://reactnavigation.org/docs/params.html