использование контекста в navigationOptions в реагирующем

Question

Я пытаюсь использовать свой созданный Контекст в Component.navigationOptions, но я не могу получить к нему доступ из-за пределов компонента

Я попробовал "props.navigation.setParams / props.navigation. getParams, но они всегда замораживают мой экран, и они не приносят никакой пользы

const AddNoteScreen = props => {
    const {addNote} = useContext(Context);
    const [title, newTitle] = useState('');
    const [description, newDescription] = useState('');

    props.navigation.setParams(addNote);


    return <>
        <Spacer/>
        <Input label='Note Title' value={title} onChangeText={newTitle} />
        <Spacer/>
        <Spacer/>
        <Input label='Note Detail' value={description} onChangeText={newDescription} multiline={true} numberOfLines={9} />
    </>
}

AddNoteScreen.navigationOptions = ({navigation}) => {
    return {
        title: "Add your note",
        headerTintColor: navigation.getParam('HeaderTintColor', '#fff'),
        headerStyle: {
            backgroundColor: 'rgb(254, 56, 56)',
            borderBottomEndRadius : 18,
            borderBottomStartRadius : 18,
        },
        headerRight: (
            <TouchableOpacity onPress={() => 
             navigation.getParam(addNote(newTitle, newDescription))}>
                <Feather style={styles.plus} name="plus" size={25}/>
            </TouchableOpacity>
        ),
    }
};

Я ожидал, что смогу использовать контекст в подобии navigationOptions, но, как я уже сказал, происходят некоторые странные вещии ничего не работает.

Answer 1

Чтобы получить доступ к addNote() внутри статических navOptions, вы должны назвать его следующим образом: navigation.state.params.addNote() и оставить состояние AddNoteScreen вне navOptions.

const AddNoteScreen = props => {
  const { addNote } = useContext(Context);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const callNoteFromNav = () => {
    addNote(newTitle, newDescription);
  };

  props.navigation.setParams(callNoteFromNav);

  return (
    <>
      <Spacer />
      <Input label="Note Title" value={title} onChangeText={setTitle} />
      <Spacer />
      <Spacer />
      <Input
        label="Note Detail"
        value={description}
        onChangeText={setDescription}
        multiline={true}
        numberOfLines={9}
      />
    </>
  );
};

AddNoteScreen.navigationOptions = ({ navigation }) => {
  return {
    title: 'Add your note',
    headerTintColor: navigation.getParam('HeaderTintColor', '#fff'),
    headerStyle: {
      backgroundColor: 'rgb(254, 56, 56)',
      borderBottomEndRadius: 18,
      borderBottomStartRadius: 18
    },
    headerRight: (
      <TouchableOpacity
        onPress={() => navigation.state.params.callNoteFromNav()}
      >
        <Feather style={styles.plus} name="plus" size={25} />
      </TouchableOpacity>
    )
  };
};

Вы не должны пытаться получить доступ к состоянию внутри navOptions, потому что оно статическое. Однако это будет функция в будущем выпуске. Я могу посоветовать вам проверить React Navigation Next . Специалисты React Navigation заменили статические опции более удобным способом React для настройки заголовка .

Удачного кодирования!