如何使用反应本机和反应导航设置背景图像? [英] How to set background image with react native and react navigation?

问题描述

我正在使用 react native 和 react navigation v3，并且我正在尝试为我的整个应用程序设置背景图像.但由于某种原因，图像不显示.

I'm using react native with react navigation v3, and I'm trying to set a background image to my entire app. But for some reason the image doesn't display.

如果我包装我的 Home 组件，背景图像会按预期显示，但如果我包装堆栈导航器，背景是白色的.我在网上搜索了解决方案，但似乎没有用.

If I'm wrapping my Home component the background image displays as expected, but if I'm wrapping the stack navigator, the background is white. I have searched online for solutions but it doesn't seem to work.

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;

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

Right now I see the component, but the background is white.

推荐答案

找到了解决方案，有点疯狂，但只有在拼写 transperent 而不是 transparent 时它才有效.回答我的问题不敢相信拼写错误就是解决办法.

Found the solution, kind of crazy but it works only if you spell transperent instead of transparent. The issue that answered me Can't believe that wrong spelling is the solution.

这篇关于如何使用反应本机和反应导航设置背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！