web-dev-qa-db-ja.com

this.props.navigation.setParamsが機能しないのはなぜですか？

私はintegerStyle配列を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});
}
_

onNavigatioOptions（デバッグのみ）

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

これらの行を50回以上チェックしていますが、this.props.navigation.setParams({selectedStyleIds});が機能していないようです。

他のすべてのものは状態とパラメータの設定に問題はありませんが、selectedStyleIdsのみを_navigation.state.params_に設定することはできません。

javascriptreact-nativereact-navigation
5
hellofanengineer

コンポーネント自体の中からナビゲーションバーのタイトルを設定することに関しても、同様の問題がありました。

以下は私のために働いた。

1）navigationOptionsメソッドを定義しました（ナビゲーションプロパティを設定するためのリアクションナビゲーションのコールバックメソッド）

このメソッドが実行されると、ナビゲーターの状態を設定するために必要なプロパティにアクセスできない可能性が非常に高いため、現在のパラメーターを返すだけです。

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

2）状態を設定して、タイトル構築をcomponentDidMountに実装しました：

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.

重要な注意：not workingとworkingは、それが「何もしない」メソッドであっても、navigationOptionsメソッドの定義でした（取得したものを変更せずに返します）。

11
Ettore Galli

2020年には、reactネイティブの公式ドキュメントではroute.paramを使用して必要なパラメーターを取得するように提案されているようです。

        const { itemId } = route.params;

これは公式ドキュメントからです：

Paramsをオブジェクトの2番目のパラメーターとして、navigation.navigate関数へのオブジェクトとして配置することにより、パラメーターをルートに渡します：navigation.navigate（ 'RouteName'、{/ * params go here * /}）

画面コンポーネントのパラメータを読みます：route.params。

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

1
akili Sosa