问题将 StackNavigation 背景颜色设置为透明（显示白色）

Question

我目前正在构建一个反应本机应用程序。我的 React Native 应用程序的一部分是，如果用户未登录，我想显示一张背景图像，其中 LoginScreen 中的内容以红色背景显示在屏幕上。我注意到 AuthenticationStackNavigation 卡由于某种原因都有白色背景，我无法通过设置

cardStyle: { backgroundColor: 'rgba(0,0,0,0)' },

来删除它，我不知道如何删除背景。我也尝试过设置

backgroundColor: 'transparent'

。有谁知道如何去除背景。

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import LoginScreen from '../Screens/Authentication/LoginScreen';
import SignupScreen from '../Screens/Authentication/SignupScreen';
import ProfileScreen from '../Screens/Authentication/ProfileScreen';
import ForgotPasswordScreen from '../Screens/Authentication/ForgotPasswordScreen';
import ConfirmEmailScreen from '../Screens/Authentication/ConfirmEmailScreen';
import { NavigationContainer } from '@react-navigation/native';
const StackNav = createStackNavigator();

const AuthenticationStackNavigation = () => {
  return (
    <NavigationContainer>
      <StackNav.Navigator
        initialRouteName="LoginScreen"
        screenOptions={{
          headerShown: false,
          cardStyle: { backgroundColor: 'rgba(0,0,0,0)' },
        }}>
        <StackNav.Screen name="LoginScreen" component={LoginScreen} />
        <StackNav.Screen name="SignupScreen" component={SignupScreen} />
        <StackNav.Screen name="ProfileScreen" component={ProfileScreen} />
        <StackNav.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
        <StackNav.Screen name="ConfirmEmailScreen" component={ConfirmEmailScreen} />
      </StackNav.Navigator>
    </NavigationContainer>
  );
};

export default AuthenticationStackNavigation;

你可以看到我的背景图片。红色的登录信息来自 LoginScreen.tsx。

我的问题是导航。

Answer 1

使用自定义主题将背景色设置为透明。像这样的东西：

<ImageBackground
  source={{ uri: 'https://picsum.photos/1080/1920' }}
  resizeMode="cover"
  style={{ flex: 1 }}>
  <NavigationContainer
    theme={{
      ...DefaultTheme,
      colors: {
        ...DefaultTheme.colors,
        background: 'transparent',
      },
    }}>
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      ...
    </Stack.Navigator>
  </NavigationContainer>
</ImageBackground>

查看如何使用主题的详细信息。