setParams 不适用于回调函数

Question

为了在屏幕中使用状态，我将回调函数作为前一个屏幕的道具发送。

要在用户在 TagStyle 上按 header 上的 'save' 按钮时调用 onCheck，我将 onCheck 函数发送到 TagStyle 来自 屏幕 A

的屏幕

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

屏幕 A 中定义的 onCheck 函数 更改状态和 navigation.state.params。这里我不能setParams。我确认 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);

setParams 不适用于回调函数

setParams is not working on callback function

javascript

react-router

react-native

react-navigation