Reactjs 使用带有React导航设置选项的功能组件的方法和状态

我正在使用React Navigation v5的

setOptions

API自定义标题按钮并访问功能组件内的功能：

import React, { useState, useLayoutEffect } from 'react';
import { View, TouchableOpacity, TextInput } from 'react-native';

export default ({ navigation }) => {

    const [text, setText] = useState('initialValue');

    console.log('render - text is now: ' + text);

    useLayoutEffect(() => {
        navigation.setOptions({
            headerRight: () => (
                <TouchableOpacity onPress={handleSubmit}>
                    <View style={{marginRight: 18, borderWidth: 2, borderColor: 'white', borderRadius: 17.5, width: 35, height: 35}}>
                        {/* FontAwesome icon omitted for brevity */}
                    </View>
                </TouchableOpacity>
            )
        });
    }, [navigation]);

    const handleSubmit = () => {
        console.log('submit - text is now: ' + text);
    };

    return (
        <View style={{flex: 1, padding: 20}}>
            <TextInput
                style={{width: '100%'}}
                multiline
                autoGrow
                value={text}
                onChangeText={text => setText(text)}
            />
        </View>
    );
};

import React，{useState，useLayoutEffect}来自'React'；
从“react native”导入{View，TouchableOpacity，TextInput}；
导出默认值（{navigation}）=>{
const[text，setText]=useState（'initialValue'）；
log（'render-text现在是：'+text）；
useLayoutEffect（（）=>{
navigation.setOptions({
头灯：（）=>(
{/*为简洁起见省略了图标*/}
)
});
}，[导航]；
常量handleSubmit=（）=>{
log（'submit-text现在是：'+text）；
};
返回(
setText（文本）}
/>
);
};

当我使用这个组件并更改文本时，我可以在控制台上看到正确的“render-text is now:…”输出

但是，当我单击标题按钮并调用

handleSubmit

方法时，不管我做了什么更改，都会看到“submit-text is now:initialValue”

我看不出我在这里做错了什么，请告诉我

版本： *反应：16.11.0 *反应本机：0.62.2

---

*@react-navigation/native:5.5.1

您必须将文本作为依赖项传递给useLayoutEffect才能使其工作

  React.useLayoutEffect(() => {
        navigation.setOptions({
            headerRight: () => (
                <TouchableOpacity onPress={handleSubmit}>
                    <View style={{marginRight: 18, borderWidth: 2, borderColor: 'white', borderRadius: 17.5, width: 35, height: 35}}>
                        {/* FontAwesome icon omitted for brevity */}
                    </View>
                </TouchableOpacity>
            )
        });
    }, [navigation,text]);

React.useLayoutEffect（（）=>{
navigation.setOptions({
头灯：（）=>(
{/*为简洁起见省略了图标*/}
)
});
}，[导航，文本]；

必须将文本作为依赖项传递给useLayoutEffect才能使其工作

  React.useLayoutEffect(() => {
        navigation.setOptions({
            headerRight: () => (
                <TouchableOpacity onPress={handleSubmit}>
                    <View style={{marginRight: 18, borderWidth: 2, borderColor: 'white', borderRadius: 17.5, width: 35, height: 35}}>
                        {/* FontAwesome icon omitted for brevity */}
                    </View>
                </TouchableOpacity>
            )
        });
    }, [navigation,text]);

React.useLayoutEffect（（）=>{
navigation.setOptions({
头灯：（）=>(
{/*为简洁起见省略了图标*/}
)
});
}，[导航，文本]；

谢谢，这很有效！你能解释一下/为什么/我需要它吗？我的理解是，这会在每次

文本

更改时有效地重新设置导航选项，但实际选项不会更改-对

文本

没有/直接/依赖性。所以我不知道它是如何工作的。我得到了这个问题，并以同样的方式进行了修复，由于某些原因，它没有看到更新的值，但我不知道实际原因：（好的，不用担心，也许其他人可以跳到这里。我已经将此标记为正确答案，因为它解决了问题。再次感谢！谢谢，这很有效！你能解释/为什么/我需要它吗？我的理解是，这会在每次

文本
更改时有效地重新设置导航选项，但实际选项不会更改-没有更改没有/direct/dependency on
text
。因此我无法理解它是如何工作的。我得到了这个问题，并以相同的方式进行了修复，由于某些原因，它没有看到更新的值，tbh我不知道实际原因：（好的，不用担心，也许其他人可以跳到这里。我已经将此标记为正确答案，因为它解决了问题。再次感谢！