Reactjs ImageBackground未包装stack.navigator，且stack.screens不可见。（@react-navigation/stack"；：“^5.10.0）react-Native

我有多个背景相同的屏幕。我想在导航文件中包含ImageBackground。但不知怎的，屏幕是看不见的

这是密码

<ImageBackground style={styles.imageContainer} source={pic1}>
   <Stack.Navigator>
     <Stack.Screen name="screen1" component="Screen1" />
   <Stack.Navigator>
</ImageBackground>



    imageContainer: {
    flex: 1,
    width: width,
    height: height,
    alignItems: 'center',
    resizeMode: 'contain',
    flexDirection: 'column',
  },

图像容器：{
弹性：1，
宽度：宽度，
高度:高度,，
对齐项目：“居中”，
resizeMode:'包含'，
flexDirection:'列'，
},

风格也包括

这是行不通的。屏幕1未显示，但背景显示正确

我还尝试将导航器的

cardStyle

设置为

backgroundColor:“transparent”

，甚至尝试了

backgroundColor:“transperent”

，但没有任何效果

---

谢谢

您必须为此使用主题，并将背景设置为透明

导入默认主题

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

更新背景色

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
    background: 'transparent',
  },
};

然后像这样包装导航容器

export default function App() {
  const image = { uri: 'https://reactjs.org/logo-og.png' };
  return (
    <ImageBackground
      source={image}
      style={{
        flex: 1,
        resizeMode: 'cover',
        justifyContent: 'center',
      }}>
      <NavigationContainer theme={MyTheme}>
        <MyStack />
      </NavigationContainer>
    </ImageBackground>
  );
}

导出默认函数App（）{
常量图像={uri:'https://reactjs.org/logo-og.png' };
返回(
);
}

你可以在这里查看小吃样品

---

如果我们有多组屏幕，每组都有不同的背景图像怎么办？我们能用同样的方法吗？使用createSwitchNavigator..我尝试将导航器包装在imagebackground中，效果很好，唯一的问题是我们必须像我做的那样在根级别设置透明度，这将非常有用。再次感谢！！