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

【问题标题】：How to remove default styles from react-navigation?如何从反应导航中删除默认样式？
【发布时间】：2021-12-12 15:53:03
【问题描述】：

我正在制作一个带有 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 时，它看起来像这样

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案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;

【讨论】：

【解决方案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/)

【讨论】：