如何根据状态更新反应导航 5 headerRight 中的文本?

Question

当用户单击反应导航 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 (....)
}

Answer 1

您没有将 editMode 作为 layoutEffect 挂钩的依赖项传递。 如果没有它，钩子将仅在"导航"参数更改时运行。像下面这样更改它。

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