为什么我的 this.props.navigation.setParams 不工作？

Question

我在 selectedStyleIds 上设置我的整数数组。为什么我的 this.props.navigaion.setParams 不起作用？

   _setSelectedStyleIds = (selectedStyleIds) => {
    const action = NavigationActions.setParams({
        params: {selectedStyleIds},
        key: 'id-1509842157447-6' <- got this from console
    });
    this.props.navigation.dispatch(action);
    this.props.navigation.setParams({styleIds:selectedStyleIds});
    this.setState({selectedStyleIds});
  }

onCheck = ({selectedStyleIds}) => {
    console.log('onCheck');
    console.log(selectedStyleIds); <- [1,2,3,4,5]
    this.props._setSelectedStyleIds(selectedStyleIds);
    this.setState({selectedStyleIds}); <- working
}

_handleTagStylePress = () => {
    this.props.navigation.navigate('TagStyle', {onCheck: this.onCheck, selectedStyleIds: this.state.selectedStyleIds});
}

onNavigatioOptions（仅用于调试）

 onPress={() => {
          let {image, text, ..., selectedSeasonIds,
            gender, selectedSizeIds, selectedColorIds, selectedStyleIds,
            brand, ..., base64 } = navigation.state.params;
          console.log('onsave')
          console.log(navigation.state.params.selectedStyleIds) <<-- []

我已经检查这些行超过 50 次，但显然 this.props.navigation.setParams({selectedStyleIds}); 不起作用。

所有其他设置状态和参数都没有问题，但只有 selectedStyleIds 不能设置为 navigation.state.params 。

原文由 merry-go-round 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我有一个类似的问题，关于从组件本身设置导航栏的标题。

以下对我有用。

1）我定义了 navigationOptions 方法（反应导航设置导航属性的回调方法）

当此方法运行时，您很可能无法访问设置导航器状态所需的属性，因此只需返回当前参数即可，这就是我所做的：

 static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return params;
};

2）我在componentDidMount中实现了标题构造，设置状态：

 componentDidMount(){
    t = "The window title";
    this.props.navigation.setParams({title: t });
}

我认为同样可以在任何用户界面事件中完成，例如 onPress ，并且可以应用于任何属性。

重要说明： 对我来说， 不工作 和 工作 之间的区别是 navigationOptions 方法的定义，即使它是一个“什么都不做”的方法（返回它得到的东西，不变）

原文由 Ettore Galli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在 2020 年，react native 的官方文档似乎建议你使用 route.param 来获取你想要的参数。

         const { itemId } = route.params;

这是来自官方文档：

通过将参数作为 navigation.navigate 函数的第二个参数放入对象中，将参数传递给路由： navigation.navigate(‘RouteName’, { /* params go here */ })

读取屏幕组件中的参数：route.params。

https://reactnavigation.org/docs/params/

原文由 akili Sosa 发布，翻译遵循 CC BY-SA 4.0 许可协议