javascript 为什么我的 this.props.navigation.setParams 不起作用？

Why is my this.props.navigation.setParams not working?

提问by hellofanengineer

I'm setting my integer array on selectedStyleIds. Why is my this.props.navigaion.setParams not working?

我在 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});
}

on onNavigatioOptions (just for debugging)

onNavigatioOptions（仅用于调试）

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

I've been checking these lines more than 50 times but apparently this.props.navigation.setParams({selectedStyleIds});is not working.

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

All other things have no problem on setting state and params but ONLY the selectedStyleIds can't be set to navigation.state.params.

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

回答by Ettore Galli

I had a similar problem, regarding setting the title of the navigation bar from within the component itself.

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

The following worked for me.

以下对我有用。

1) I defined the navigationOptions method (callback method of react navigation to set navigation properties)

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

When this method runs, you are very likely not to have access to the properties that are needed to set the navigator state, so simply return the current parameters, this is what I did:

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

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

2) I implemented the title construction in componentDidMount, setting the state:

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

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

I think the same could be done in any user interface event, like the onPress, and can be applied to any property.

Important note:What made the difference to me between not workingand workingwas the definition of the navigationOptions method, even if it is a "do-nothing" method (returns what it gets, unchanged)

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

回答by akili Sosa

Now in 2020 it seems like the official documentation of react native suggests that you use route.param to get the params you want.

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

        const { itemId } = route.params;

This is from the official documentation:

这是来自官方文档：

Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: navigation.navigate('RouteName', { /* params go here */ })

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

Read the params in your screen component: route.params.

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

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

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