RN 中的createNativeStackNavigator，为什么出现顶部的 header

在 React Native 中，createNativeStackNavigator 是 React Navigation 库提供的一个用于创建原生堆栈导航器的函数。它允许你在应用程序中创建具有堆栈导航功能的屏幕，其中每个屏幕都可以被推送到堆栈上或从堆栈中弹出。

createNativeStackNavigator 生成的导航器默认包含一个顶部的 header，这是因为堆栈导航器通常需要在顶部显示一些导航信息，比如当前屏幕的标题、返回按钮（如果当前屏幕不是堆栈的根屏幕）、以及其他可能的导航控件（如菜单按钮、搜索按钮等）。

这个 header 是由 React Navigation 库自动管理的，并且它提供了一套默认的样式和行为。但是，你可以通过配置来定制这个 header，包括更改它的样式、隐藏它、或者添加自定义的按钮和组件。

定制 Header

如果你想要定制 header，你可以在每个屏幕的选项（options）中进行配置。例如，你可以更改标题文本、设置返回按钮的图标、或者添加自定义的按钮。

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
      {/* 其他屏幕 */}
    </Stack.Navigator>
  );
}

在上面的示例中，我们为 Home 屏幕设置了自定义的 header 样式，包括背景色、文字颜色和标题样式。

隐藏 Header

如果你想要完全隐藏 header，你可以将 headerShown 选项设置为 false。

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerShown: false,
  }}
/>

添加自定义组件

你还可以向 header 中添加自定义的组件，比如一个自定义的搜索栏或者一个按钮。这可以通过在 options 中使用 headerRight、headerLeft 或 headerTitle 属性来实现，这些属性接受一个 React 元素作为值。

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerRight: () => (
      <Button
        title="Add"
        onPress={() => alert('Add button pressed')}
      />
    ),
  }}
/>

在这个示例中，我们在 header 的右侧添加了一个自定义的按钮。

总之，createNativeStackNavigator 生成的导航器默认包含顶部的 header，但你可以通过配置来定制或隐藏它。React Navigation 提供了丰富的选项来满足不同的导航需求。