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

发布时间：2020-12-15 16:18:08 所属栏目：百科来源：网络整理

导读：我试图使用NativeBase与ReactNative并将图片作为背景.我已经谷歌搜索了一段时间,这里是我提出的代码： export default class WelcomeScreen extends Component { render(){ return ( Container Header Button transparent Icon name='ios-arrow-back' / /But

我试图使用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',}
});

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

Simulator Image

这是实际的图像：

Actual Picture

我该如何解决？

解决方法

我有两个解决方案：

> 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!