如何基于状态更新React Navigation 5 headerRight中的文本？

Question

[当用户单击react-navigation 5 headerRight中的'Edit'按钮时，我希望文本切换为显示'Done'，但似乎是导航选项。无权访问当前状态。如何更新才能正常工作？

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 (....)

}

Answer 1

您没有将editMode传递为layoutEffect挂钩的依赖项。否则，该挂钩将仅在“导航”参数更改时运行。如下更改。

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