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

新手上路,请多包涵

我在 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 许可协议

阅读 647
2 个回答

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

以下对我有用。

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 许可协议

现在 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题