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;

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

Answer 1

找到了解决方案，有点疯狂，但仅当您拼写透明而不是透明时，它才有效。 The issue that answered me 不能相信拼写错误是解决方案。

Answer 2

在createStackNavigator函数中设置transparentCard：true将解决您的问题。

SubmitRouter = createStackNavigator（ { 注册：CreateUser，登录名：LoginScreen，仪表板：主屏幕 }， { transparentCard：true } ）;

Answer 3

我将@patrick的答案添加到OP并为我工作。

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',
        },
      }),
    },
 ),
);

Answer 4

首先添加带有高度和 absolute 定位的屏幕的图像背景。

在 Parent 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>

...

如何使用React Native和React导航设置背景图像？

4 个答案: