如何根据状态更新反应导航 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 挂钩的依赖项传递。 没有它，只有当 'navigation' 参数改变时，钩子才会 运行。像下面这样更改。

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