如何使用反应原生和反应导航设置背景图像？答案

【问题标题】：How to set background image with react native and react navigation?如何使用反应原生和反应导航设置背景图像？
【发布时间】：2019-02-08 19:52:23
【问题描述】：

我将 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;

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

【问题讨论】：

可能与：stackoverflow.com/questions/31319947/…
@Perniferous 我试过了，没用:(
设置 backgroundColor: 'transparent' 和 opacity: 0.5 看看是否可以解决问题。如果不透明度发生变化，请更改它。
@TanmoySarker 它可以工作，但会影响我想要显示的内容。
不知道你是怎么用透明的。当我尝试时，它显示我无效的道具。无论如何，你得到了解决方案。

标签： react-native react-navigation

【解决方案1】：

这是 react-navigation v6.x

的解决方案

按照@Bizkrem Muhammad's answer 中的建议，在堆栈导航器的screenOptions 属性上设置cardStyle: {backgroundColor: 'transparent'}，对我不起作用。

但是，在this Github issue 的帮助下，我找到了一个解决方案，可以为我们的NavigatorContainer 的每个屏幕设置默认背景颜色：

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

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

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

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

【讨论】：

【解决方案2】：

找到了解决方案，有点疯狂，但它只有在你拼写 transperent 而不是 transparent 时才有效。 The issue that answered me 无法相信拼写错误是解决办法。

【讨论】：

【解决方案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',
        },
      }),
    },
 ),
);

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

在 Parent Stack Navigator 组中，添加 screenOptions 属性，您可以为卡片 cardStyle 传递全局样式并添加 backgroundColor: "transparent"

这是一个完整的sn-p

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>

...

【讨论】：