使用 options 属性来控制屏幕顶部的导航栏

在 React Navigation 6 中，你可以通过使用 options 属性来控制屏幕顶部的导航栏。

在你的屏幕组件中，你可以通过在 options 属性中设置不同的值来控制导航栏的显示、标题等。

以下是一个示例，展示如何在屏幕组件中控制导航栏的显示和自定义按钮：

import React from 'react';
import {
    
     View, Text, Button } from 'react-native';
import {
    
     useNavigation } from '@react-navigation/native';

const MyScreen = () => {
    
    
  const navigation = useNavigation();

  // 控制导航栏的显示和自定义按钮
  React.useLayoutEffect(() => {
    
    
    navigation.setOptions({
    
    
      headerShown: false, // 控制导航栏的显示，设置为 false 隐藏导航栏
      headerRight: () => (
        <Button
          onPress={
    
    () => {
    
    
            // 自定义按钮的操作
            console.log('执行自定义操作');
          }}
          title="Custom Button"
        />
      ),
    });
  }, [navigation]);

  return (
    <View>
      <Text>My Screen</Text>
      {
    
    /* 屏幕内容 */}
    </View>
  );
};

export default MyScreen;

在上面的示例中，我们使用 useLayoutEffect 钩子来监听组件的渲染，并在组件渲染时通过 navigation.setOptions 方法来设置导航栏的选项。

在 setOptions 中，我们可以设置以下选项来控制导航栏：

headerShown：控制导航栏的显示，设置为 false 隐藏导航栏。
headerRight：自定义导航栏的右侧组件，这里我们使用一个自定义按钮。

你可以根据需要设置其他选项，例如 headerTitle、headerTintColor 等。

通过在屏幕组件中使用 setOptions 方法，你可以灵活地控制屏幕顶部的导航栏，并进行自定义操作。

React.useLayoutEffect 在上面的代码中是有怎样的作用

React.useLayoutEffect 是 React 提供的一个钩子函数，用于在组件渲染到 DOM 之后同步执行副作用操作。

在上面的代码中，我们使用 React.useLayoutEffect 来监听组件的渲染，并在组件渲染后立即执行副作用操作。具体来说，我们使用它来设置导航栏的选项。

为什么使用 React.useLayoutEffect 而不是普通的 useEffect 呢？这是因为我们希望在 DOM 渲染之后立即更新导航栏的选项，以确保用户能够看到更新后的导航栏状态。而 useEffect 会在 DOM 渲染完成后才执行副作用操作，可能会导致短暂的延迟或闪烁。

使用 React.useLayoutEffect 可以确保我们的副作用操作与 DOM 渲染同步执行，从而避免可能出现的延迟和不一致性。

需要注意的是，由于 React.useLayoutEffect 是同步执行的，可能会对组件渲染的性能产生一些影响。因此，应该谨慎使用，并确保在必要的情况下才使用它。

总结起来，React.useLayoutEffect 在上述代码中的作用是在组件渲染到 DOM 后立即执行副作用操作，以设置导航栏的选项，并确保用户能够看到更新后的导航栏状态。