React Native StackNavigator菜单中screenProps传值无法重置的问题求助

我之前也碰到过类似的情况，screenProps本身是静态传递的，要是像你原来那样只传固定值，父组件没维护对应的状态，点击ListItem时肯定没法更新值并同步给所有Tab。这里给你一个基于React状态管理的简单可行方案：

步骤1：在父组件中维护状态并提供更新方法 #

先修改你的Index组件，把要传递的Number改成组件状态，同时定义一个更新状态的方法，把这个方法也通过screenProps传给子组件：

export default class Index extends Component {
  constructor(props){
    super(props);
    // 初始化选中的id状态
    this.state = {
      selectedNumber: 123
    };
    // 绑定方法的this指向，避免子组件调用时丢失上下文
    this.updateSelectedNumber = this.updateSelectedNumber.bind(this);
  }

  // 用于更新选中id的方法
  updateSelectedNumber(newNumber) {
    this.setState({
      selectedNumber: newNumber
    });
  }

  render() {
    return ( 
      <OrderScreen 
        screenProps={ { 
          Number: this.state.selectedNumber,
          updateNumber: this.updateSelectedNumber // 把更新方法传递给子组件
        } } 
      /> 
    );
  }
}

步骤2：在ListItem的点击事件中触发更新 #

在你的ListItem所在子组件里，点击时调用父组件传来的updateNumber方法，传入新的id值：

// 假设这是你的ListItem组件代码
<ListItem
  onPress={() => {
    // 这里替换成你实际获取新id的逻辑，比如从item数据中取
    const targetId = item.id;
    // 调用父组件的更新方法
    this.props.screenProps.updateNumber(targetId);
  }}
  title="某个菜单选项"
  // 其他ListItem属性...
/>

为什么这个方案有效？ #

当你调用updateNumber时，父组件的setState会触发组件重新渲染，此时screenProps中的Number会带上最新的id值，StackNavigator下的所有Tab组件都能通过this.props.screenProps.Number拿到最新的id，进而请求对应API数据。

如果你的应用后续变得更复杂，涉及多层组件传递数据，也可以考虑使用React Context或者Redux来做全局状态管理，但这个基础方案已经能解决当前的需求啦。

内容的提问来源于stack exchange，提问作者Xa Na