如何从反应导航中删除默认样式？

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;

Answer 2

要打造自己的风格，请这样做

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer, DefaultTheme } from "@reactnavigation/native";

 const MyTheme = {
    ...DefaultTheme,
    colors: {
       ...DefaultTheme.colors,
       background: Color.red,
      },
    };

然后这样做

<NavigationContainer theme={MyTheme}>
    <Stack.Navigator initialRouteName="startscreen" headerMode="none"  >
    </Stack.Navigator>
</NavigationContainer>

更多信息在这里 (https://reactnavigation.org/docs/themes/)

如何从反应导航中删除默认样式？

How to remove default styles from react-navigation?

javascript

react-native

react-navigation