【ReactNative】react-navigationで遷移先から値を取る

入力フォームの選択項目などを想定。 別画面で開いたリスト画面で選択した項目を、元画面に反映する。 iOS標準のぐるぐる回すセレクトボックスのコントロール嫌いなのです。

遷移先から値を取る方法

最初単純にcallbackを呼んでいたのだが、ワーニングが出てた。 調べたらちゃんとしたやり方は下記に書いてあった。 goBack()を使うのではなく、navigate()で戻ればいいようだ。

Passing parameters to routes | React Navigation

遷移元

  let [category, setCategory] = React.useState('');

  // 選択画面での選択値を受け取って更新
  React.useEffect(() => {
    if (route.params?.category) {
      setCategory(route.params.category);
    }
  }, [route.params?.category]);

      <View style={{ height: 200 }}>
          <Text>商品情報</Text>
          <View style={{ flex: 1, backgroundColor: 'white' }}>
            <ListItem
              title="カテゴリ"
              bottomDivider
              chevron
              onPress={
                // 単純に選択画面を開く
                () => navigation.navigate('Category')
              }
              rightElement={category}
            />
          </View>
        </View>

遷移先（選択画面）

const SelectCategoryScreen = ({ navigation, route }) => {
  const list = [
    { title: '書籍・CD・DVD' },
    { title: '家電・スマホ・PC' },
    { title: 'ゲーム・おもちゃ' },
    { title: '衣服・靴' },
    { title: 'その他' },
  ];

  renderItem = ({ item }) => {
    return (
      <ListItem
        title={item.title}
        bottomDivider
        onPress={() => {
          // 遷移元から渡した関数を呼ぶ
          route.params.setCategory(item.title);
          navigation.goBack();
        }}
      />
    );
  };

  return (
    <FlatList
      data={list}
      keyExtractor={(item, index) => index.toString()}
      renderItem={renderItem}
    ></FlatList>
  );
};

コールバックで渡すだけだとワーニングが出る

下記のようにすると動作するようだがワーニングがでる。 navigateでパラメータに関数を渡すのがまずいようだ。

遷移元

            <ListItem
              title="カテゴリ"
              bottomDivider
              chevron
              onPress={() =>
                // 更新関数をパラメータで渡す
                navigation.navigate('Category', {
                  setCategory,
                })
              }
              rightElement={category}
            />

遷移先（選択画面）

  renderItem = ({ item }) => {
    return (
      <ListItem
        title={item.title}
        bottomDivider
        onPress={() => {
          // 遷移元から渡した関数を呼ぶ
          route.params.setCategory(item.title);
          navigation.goBack();
        }}
      />
    );
  };