navigationOptionsにコンポーネントのpropsを渡したい

4203 ワード
reactnavigation reactnative reactnative テキストリンク

アプリのヘッダーにある「保存」ボタンにコンポーネントの値を渡したいときどうするか、みたいな話です

処理の概要

  1. コンポーネントの中で setParams する
  2. setParamに渡したい値を入れる
  3. navigationOptionsの中でgetParamする

サンプルコード


// 画面
const FooScreen: React.FC & NavigationStackScreenComponent = ({ navigation }) => {
  // navigationでこの値を渡したい
  const [count, setCount] = useState<number>(0)

  // countが更新されたらnavigationのparamの値も更新する
  useEffect(() => {
    navigation.setParams({ fooParam: count })
  }, [count])

  return (
    <View>
      <Button title='おしてね' onPress={() => setCount(count + 1)} />
    </View>
  )
}

// navigation options
FooScreen.navigationOptions = ({ navigation }) => ({
  title: 'ふーーー',
  headerRight: (
    <Button title='保存' onPress={() => navigation.navigate('Bar', {
      // setParamで設定した値を取得 -> Bar画面へのparamに入れ直す
      fooParam: navigation.getParam('fooParam') 
    })} />
  )
})
os.fork()
魚cノート——PythonのGUIプログラミング(五):TkinterコンポーネントListbox、Scrollbar、Scale