javascript - 如何从 react 导航中删除默认样式？

Question

我正在制作一个带有 React Native 和 React-Navigation 的应用程序。所以我所做的就是制作了一个登录屏幕。然后我使用 react-navigation 创建一个本地堆栈导航器并将其链接到我的登录屏幕。我成功渲染了登录屏幕，但堆栈导航器上似乎有某种默认样式(？)。如何删除或覆盖这些样式，以便恢复屏幕的原始样式？图片和代码如下。

这是堆栈导航器

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/LoginScreen';
import SignUpScreen from '../screens/SignUpScreen';

const Stack = createNativeStackNavigator();

const AuthStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" screenOptions={{ header: () => null }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Signup" component={SignUpScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AuthStack;

当我只渲染 LoginScreen 时，它看起来像这样

当我使用 AuthStack 时，它看起来像这样

Answer 1

应该仔细阅读文档，它在 NativeStackNavigator 选项中。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/LoginScreen';
import SignUpScreen from '../screens/SignUpScreen';

const Stack = createNativeStackNavigator();

const AuthStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions={{
          headerShown: false,
          header: () => null,
          contentStyle: { backgroundColor: 'white' },
        }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Signup" component={SignUpScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AuthStack;