将状态道具从功能组件暴露给NavigationOptions功能

Question

我有一个呈现输入字段的组件，当用户单击标题中的“下一个”按钮时，我想将数据传递到下一页。最佳做法是什么？如何将其暴露在Page.navigationOptions中？

或者最好只是为这些类型的事情设置redux？

const Page = () => {
  const [desc, getDesc] = useState('');

  return (
    <View style={styles.inputFieldDescContainer}>
      <TextInput
        multiline
        placeholder='Write a description...'
        onChangeText={(text) => getDesc(text)}
        value={desc}
      />
    </View>  
  );
};

// How do I pass desc properties down into navigationOptions?

Page.navigationOptions = (navData) => {
  return {
    headerTitle: 'Page,
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title='Next'
          onPress={() => {
            navData.navigation.navigate('NextPage', {data: navData});
          }}
        />
      </HeaderButtons>
    ),
    headerBackTitle: null
  };
};

/* NextPage.js */

const NextPage = (props) => {
  console.log('enter props data', props.navigation.getParam('data'));
  console.log('enter props navigation', props.navigation);
  const [valueText, setValueText] = useState();
  return (
    <View>
      <TextInput onChangeText={(text) => setValueText(text)} value={valueText}/>
      <TouchableOpacity><Text>Create your workout</Text></TouchableOpacity>
    </View>
  );
;}

Answer 1

在React Navigation 5 https://blog.expo.io/announcing-react-navigation-5-0-bd9e5d45569e中可以在组件和选项之间共享状态和道具。>

在React Navigation 4中，您可以使用参数来存储值以共享它：

const Page = ({ navigation }) => {
  const desc = navigation.getParam('description', '');

  return (
    <View style={styles.inputFieldDescContainer}>
      <TextInput
        multiline
        placeholder='Write a description...'
        onChangeText={(text) => navigation.setParams({ description: text )}
        value={desc}
      />
    </View>  
  );
}