如何在React Native和React Navigation中设置背景图片？

Question

我正在使用react native和react navigation v3，我试图为整个应用程序设置背景图片。但是由于某些原因，图片没有显示出来。

如果我将Home组件包装起来，背景图片会按预期显示，但如果我将堆栈导航器包装起来，背景就是白色的。我在网上搜索了解决方案，但似乎不起作用。

const AppNavigator = createAppContainer(
  createStackNavigator(
    {
      Home: {screen: Home},
      Vocabulary: {screen: Vocabulary},
      AddWord: {screen: AddWord},
    },
    {
      initialRouteName: 'Home',
      headerMode: 'none',
      cardStyle: {backgroundColor: 'transparent', shadowColor:'transparent'},
      transitionConfig: () => ({
        containerStyle: {
          backgroundColor: 'transparent',
        },
      }),
    },
 ),
);
const App = () => {
 return (
    <ImageBackground
      source={require('./src/drawable/background1.jpg')}
      style={{flex: 1}}
      resizeMode="cover">
      <Provider store={store()}>
        <AppNavigator />
      </Provider>
    </ImageBackground>
 );
};
export default App;

现在我看到这个组件，但是背景是白色的。

- Gilli Carmon

---

可能与以下问题相关：https://dev59.com/rYzda4cB1Zd3GeqPrtej?rq=1 - Perniferous

@Perniferous 我已经尝试过了，没有起作用 :( - Gilli Carmon

设置 backgroundColor: 'transparent' 和 opacity: 0.5，看看是否解决了问题。如果有变化，请更改不透明度。 - Tanmoy Sarker

@TanmoySarker 这个代码可以运行，但会影响我想要展示的内容。 - Gilli Carmon

不知道你是如何使用透明完成的。当我尝试时，它显示了无效的属性。无论如何，你找到了解决方案。 - Tanmoy Sarker

Answer 1

以下是适用于 react-navigation v6.x 的解决方案。

在堆栈导航器的 screenOptions 属性中设置 cardStyle: {backgroundColor: 'transparent'}，如@Bizkrem Muhammad's answer所提出的那样，这对我无效。

但是，在此 Github 问题的帮助下，我找到了一种解决方案，为我们的 NavigatorContainer 设置了默认的背景颜色：

import {
  DefaultTheme,
  NavigationContainer,
} from '@react-navigation/native';

const navTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

然后将你的 Navigator 或 NavigationContainer 用 <ImageBackground> 包裹起来，就像这样：

return (
    <ImageBackground source={{/* your desired uri */}}>
        <NavigationContainer theme={navTheme} >
            {/* ... */}
        </NavigationContainer>
    </ImageBackground>
)

- liamirali

Answer 2

找到了解决方案，有点疯狂但只有在你将transparent拼写为transperent时才能起作用。 回答我的问题 真不敢相信错别字竟是解决之道。

- Gilli Carmon

Answer 3

首先，使用屏幕的宽度和高度以及 absolute 定位添加您的图像背景。

并且在父级 Stack Navigator 组中，添加 screenOptions 属性，您可以传递全局样式给卡片的 cardStyle 并添加 backgroundColor: "transparent"。

这是一个完整的代码片段：

const { width, height } = Dimentions.get("screen");

...
<NavigationContainer>
  <Image source={require("./assets/bg.png")} style={{width, height, position: "absolute"}} />
  <Stack.Navigator
    screenOptions={{
      header: () => null,
      cardStyle: {
        backgroundColor: "transparent",
      },
    }}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
  </Stack.Navigator>
</NavigationContainer>

...

- Biskrem Muhammad

Answer 4

我把@patrick的答案添加到了原帖中，对我有用。

const AppNavigator = createAppContainer(
  createStackNavigator(
    {
      Home: {screen: Home},
      Vocabulary: {screen: Vocabulary},
      AddWord: {screen: AddWord},
    },
    {
      initialRouteName: 'Home',
      headerMode: 'none',
      cardStyle: {backgroundColor: 'transparent', shadowColor:'transparent'},
      transparentCard: true, 
      transitionConfig: () => ({
        containerStyle: {
          backgroundColor: 'transparent',
        },
      }),
    },
 ),
);

- kent

Answer 5

在createStackNavigator函数中设置transparentCard:true可以解决您的问题。

SubmitRouter = createStackNavigator(
  {
    SignUp: CreateUser,
    Login: LoginScreen,
    Dashboard: MainScreen
  },
  {
    transparentCard: true
  }
); 

- patrick