setParamsがコールバック関数で機能していません

Question

Screenで状態を使用するには、前の画面からコールバック関数を小道具として送信しています。 TagStyleのヘッダ上のボタン「保存」ユーザープレスが、私は画面からTagStyle画面にAで定義された

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

oncheckの機能をonCheck機能を送信していたときにonCheckを呼び出すために

stateとnavigation.state.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で最新のものでないのparamsを設定したが、どこかparamsはされて推測しています。この問題にどのように接近したり、デバッグしたりすることができないのか分かりませんでした。

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