问题描述
我有多个背景相同的屏幕.我想在导航文件本身中有 ImageBackground.但不知何故,屏幕不可见.
I have multiple screens with the same background. I thought of having the ImageBackground in the Navigation file itself. But somehow the screens are not visible.
这是代码
<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',
},
还包括样式
这不起作用.Screen1未显示,但背景显示正常.
This is not working. Screen1 is not displayed but the background is properly displayed.
我还尝试将导航器的 cardStyle
设置为 backgroundColor:"transparent"
,甚至尝试过 backgroundColor:"transperent"
但没有任何效果.
I also tried giving the cardStyle
for the navigator as backgroundColor:"transparent"
, even tried backgroundColor:"transperent"
but nothing is working.
谢谢!!
推荐答案
为此您必须使用主题并将背景设置为透明.
You will have to use themes for this and set the background as transparent.
导入默认主题
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
更新背景颜色
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: 'rgb(255, 45, 85)',
background: 'transparent',
},
};
然后像这样包装导航容器.
And wrap the navigation container like this.
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/@guruparan/createstacknavigator-|-反应导航
You can check the sample snack herehttps://snack.expo.io/@guruparan/createstacknavigator-|-react-navigation
这篇关于ImageBackground 没有包装 stack.navigator 并且 stack.screens 不可见.(@react-navigation/stack": "^5.10.0 ) React-Native的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!