ImageBackground 没有包装 stack.navigator 并且 stack.screens 不可见.(@react-navigation/stack": "^5.10.0 ) React-Native [英] ImageBackground is not wrapping the stack.navigator and the stack.screens are not visible. (@react-navigation/stack": "^5.10.0 ) React-Native

问题描述

我有多个背景相同的屏幕.我想在导航文件本身中有 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 here https://snack.expo.io/@guruparan/createstacknavigator-|-react-navigation

这篇关于ImageBackground 没有包装 stack.navigator 并且 stack.screens 不可见.(@react-navigation/stack": "^5.10.0 ) React-Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！