ImageBackground 在应用程序的根目录中使用时不起作用

Question

我想在我的 react-native 应用程序中应用渐变背景图像，因此我没有将 ImageBackground 放在每个组件中，而是将它放在我的 app.js 中以将所有屏幕包裹在它下面。但只有背景图像可见，背面图像上看不到其他内容。这是我的 app.js

render() {
        return (
      <View 
      style={{flex:1}}>
         <ImageBackground style={{ flex: 1,
        resizeMode: 'cover'}} source={APP_BACKGROUND_IMAGE}  >
         <View style={styles.container}>
         <AppNavigator />
         </View>
         </ImageBackground>
</View>
        );
    }
}

const styles = StyleSheet.create({
  container:{ 
  position:'absolute',
  top: 0,
  bottom: 0,
  left: 0,
  right: 0
},
});

这是 AppNavigator

render() {
        return (
        <MainStackNavigator/>
        );
    }
}

这是 MainStackNavigator：

import { createStackNavigator } from 'react-navigation';
import OnBoarding from '../screens/OnBoarding';
import LoginContainer from '../screens/Login/LoginContainer';
export const MainStackNavigator = createStackNavigator({
    OnBoardingScreen: {screen: OnBoarding},
    LoginScreen: {screen: LoginContainer}
}):

这是我的第一个屏幕登机：

render() {
    return (
        <AppIntro customStyles={{
                dotStyle: {
                    width: 6,
                    height: 6,
                },

            }} showDoneButton={false} showSkipButton={false}

                onSlideChange={this.onSlideChangeHandle} >
                {this.getOnBoardingScreens()}
            </AppIntro>

        );
    }
}

有人能告诉我我在做什么错吗？我尝试了几件事，但没有任何效果。 :( P.S：当我在 app.js 中直接在 ImageBackground 下调用 <OnBoarding/> 时，它可以工作！

Answer 1

使用定义了样式并具有渐变背景的容器。这是在应用程序的根目录中设置背景的直接方式。 1.导入您要在背景中设置的图像。 从'../images/background_image.png'导入背景； 2.使用根元素的内联样式，并使用导入的图像，如下所示。 背景图片：`url(${背景}