我有多个具有相同背景的屏幕。我想到将 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',
},
款式也包括在内
这是行不通的。 Screen1 未显示,但背景正常显示。
我也尝试过给予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>
);
}
您可以在这里查看零食样品https://snack.expo.io/@guruparan/createstacknavigator-|-react-navigation https://snack.expo.io/@guruparan/createstacknavigator-%7C-react-navigation
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)