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

问题

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

  _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)

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.

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

回答1:

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)

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:

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 working and working was the definition of the navigationOptions method, even if it is a "do-nothing" method (returns what it gets, unchanged)

来源：https://stackoverflow.com/questions/47093555/why-is-my-this-props-navigation-setparams-not-working

标签

javascript

react-native

react-navigation