1

我想在我的 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>

        );
    }
}

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

4

1 回答 1

0

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

于 2018-12-03T06:24:47.683 回答