在應用程序的根目錄下使用時，ImageBackground無法正常工作

Question

我想在我的react-native應用程序中應用漸變背景圖像，所以不是將ImageBackground放到每個組件中，而是將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}
}):

這是我的第一個屏幕OnBoarding：

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

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

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

        );
    }
}

有人可以告訴我我在做什么錯嗎？ 我嘗試了幾件事，但沒有任何效果。 :( PS：當我直接在app.js的ImageBackground下調用<OnBoarding/> ，它可以工作！

Answer 1

使用定義的樣式並具有漸變背景的容器。 這是在應用程序根目錄中設置背景的直接方法。 1.導入要在背景中設置的圖像。 從'../images/background_image.png'導入背景； 2.使用根元素的內聯樣式，然后使用導入的圖像，如下所示。 backgroundImage：`url（$ {Background}