ImageBackground 未包装 stack.navigator，并且 stack.screens 不可见。(@react-navigation/stack ": " ^5.10.0 )反应原生

Question

我有多个背景相同的屏幕。我想在导航文件中包含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未显示，但背景已正确显示。

我还尝试将导航器的cardStyle作为backgroundColor:"transparent"，甚至尝试了backgroundColor:"transperent"，但都不起作用。

谢谢！！

Answer 1

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

导入默认主题

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

你可以在这里查看零食样品https://snack.expo.io/@gurupan/createstacknavigator-|-rect导航