やりたかったこと

NavigationStackScreenComponentで定義した値を送信する自作関数をnavigationOptionsで持たせているヘッダーから実行し、変更後の値を送信したかった。

解決した方法

初回レンダリング時だけでなく、textの値が変更される度にnavigation.setParamsをするようにした。

React.useEffect(() => {
  navigation.setParams({ onSubmit: onSubmit });
}, [text]);

詰まった箇所

MainScreenの初回レンダリング時にnavigation.setParamsで渡した関数をヘッダーのTextButtonで受け取って設定した。
textの値を（'Foo'）に変更して実行してもアラートに表示されるtextは（’Hoge’）から変更されずに困っていた。

import * as React from 'react';
import { Alert } from 'react-native';
import { NavigationStackScreenComponent } from 'react-navigation-stack';

const MainScreen: NavigationStackScreenComponent = ({ navigation }) => {
  const [text, setText] = React.useState<string>('Hoge');

  // 送信する
  const _onSubmit = async () => {
    Alert.alert('送信', text);
  };

  React.useEffect(() => {
    navigation.setParams({ onSubmit: onSubmit });
  }, []);

  return (
    <>
      ~~~
    </>
  );
};

MainScreen.navigationOptions = ({ navigation }) => ({
  headerTitle: 'Main',
  headerRight: <TextButton onPress={() => {
    navigation.getParam('onSubmit')();
  } />,
});