javascript - setParams 不适用于回调函数

Question

为了在屏幕中使用状态，我从前一个屏幕发送回调函数作为 Prop 。

调用onCheck当用户按 TagStyle 标题上的“保存”按钮时，我正在发送onCheck函数为 TagStyle来自屏幕A的屏幕

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

屏幕 A 中定义的 onCheck 函数更改状态和 navigation.state.params。这里我无法设置Params。我确认 this.props.navigation 有 setParams 方法，但不知何故它没有做任何事情。

  _setSelectedStyleIds = (selectedStyleIds) => {
    console.log(selectedStyleIds); <- correctly printed [1,2,3,4,5]
    const action = NavigationActions.setParams({ params: {selectedStyleIds}, 
        key: 'id-1509842157447-6' });
    this.props.navigation.dispatch(action); <- no params change at all
    this.props.navigation.setParams({styleIds:selectedStyleIds}); <- no params change at all
    this.setState({selectedStyleIds});
  }

  onCheck = ({selectedStyleIds}) => {
    console.log(selectedStyleIds); <- correctly printed [1,2,3,4,5]
    this._setSelectedStyleIds(selectedStyleIds);
    console.log(this.props);  <- result showing below
    // navigation.state.params.selectedStyleIds: []
    this.setState({selectedStyleIds}); <- setState is working
    // state = {selectedStyleIds:[1,2,3,4,5]}
  }

console.log(this.props);打印

Object {
  "dispatch": [Function anonymous],
  "navigation": Object {
    "dispatch": [Function anonymous],
    "goBack": [Function goBack],
    "navigate": [Function navigate],
    "setParams": [Function setParams],
    "state": Object {
      "key": "id-1509771947484-6",
      "params": Object {
        "bigType": "Top",
        ...
        ...
        ...
        "selectedStyleIds": Array [],
        ...
      },
      "routeName": "AddClotho",
    },
  },
  "screenProps": undefined,
}

TagStyle 屏幕

  static navigationOptions = ({ navigation }) => ({
    headerRight: (
      <RkButton
        rkType='clear'
        onPress={() => {
          console.log(navigation.state.params.selectedStyleIds) <- [1,2,3,4,5]
          navigation.state.params.onCheck({selectedStyleIds: navigation.state.params.selectedStyleIds});
          navigation.goBack();
        }}>
        <RkText rkType="header3">SAVE</RkText>
      </RkButton>
    ),
  })

我猜测 this.props.navigation.setParams 不是在屏幕 A 中设置当前参数，而是在某处设置参数。我找不到如何进一步解决或调试这个问题。

Answer 1

对此有一种更受控制的方法。您可以尝试以下操作吗？

import { NavigationActions } from 'react-navigation';

...

const setParamsAction = NavigationActions.setParams({
  params: { onCheck: /* YOUR FUNCTION */ },
  key: 'ROUTE FOR PARAM CHANGE',
});

this.props.navigation.dispatch(setParamsAction);