当前位置 : 主页 > 网页制作 > React >

无法获取背景图像以使用React-Native和NativeBase

来源:互联网 收集:自由互联 发布时间:2021-06-15
我试图使用NativeBase与ReactNative并将图片作为背景.我已经谷歌搜索了一段时间,这里是我提出的代码: export default class WelcomeScreen extends Component { render(){ return ( Container Header Button transparen
我试图使用NativeBase与ReactNative并将图片作为背景.我已经谷歌搜索了一段时间,这里是我提出的代码:

export default class WelcomeScreen extends Component {
    render(){
        return (
            <Container>
                <Header>
                    <Button transparent>
                        <Icon name='ios-arrow-back' />
                    </Button>
                </Header>
                <Content>
                    <Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} />
                    <Text>Do you ever feel like you dont have a partner</Text>
                </Content>
            </Container>
        );
    }
}

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

问题是这会使图像拉伸很多,因此在模拟器中无法识别.这是模拟器中与实际图像相比的图片:

这是实际的图像:

我该如何解决?

我有两个解决方案:

> NativeBase Content组件是React Native ScrollView的包装.
与ScrollView一起使用时的图像使得必须包括图像的高度和宽度.
>如果要排除提及图像的尺寸,请使用“视图”代替“内容”.

<View>
  <Image
     source={testImage}
     style={{ flex: 1, height: null, width: null, resizeMode: 'cover' }}
  />
  <Text>Do you ever feel like you dont have a partner</Text>
</View>
网友评论