Как можно обновить текст в React Navigation 5 headerRight в зависимости от состояния?

Когда пользователь нажимает кнопку «Изменить» в заголовке «React-navigation 5» справа, я хотел бы, чтобы текст переключался на «Готово», но, похоже, это параметры навигации. нет доступа к текущему состоянию. Как это можно обновить, чтобы оно работало?

import React, {useState, useLayoutEffect} from 'react';
import { TouchableWithoutFeedback, View, Text } from 'react-native';

export default function ListScreen({navigation}){
  const [editMode, setEditMode] = useState(false);

  useLayoutEffect(() => {
      navigation.setOptions({
        headerRight: () => (
          <TouchableWithoutFeedback onPress={() => setEditMode(!editMode) }>
            <Text>{editMode ? 'Done' : 'Edit'}</Text>
          </TouchableWithoutFeedback>
        ),
      });
    }, [navigation]);

  return (....)

}

react-native react-hooks react-navigation react-navigation-v5
person Dan    schedule 07.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы не передаете editMode как зависимость для хука layoutEffect. Без этого ловушка будет работать только при изменении параметра навигации. Измените его, как показано ниже.

  useLayoutEffect(() => {
      navigation.setOptions({
        headerRight: () => (
          <TouchableWithoutFeedback onPress={() => setEditMode(!editMode) }>
            <Text>{editMode ? 'Done' : 'Edit'}</Text>
          </TouchableWithoutFeedback>
        ),
      });
    }, [navigation,editMode]);
person Guruparan Giritharan    schedule 08.06.2020