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

Question

我正在尝试将 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',
  }
});

问题是这会极大地拉伸图像，以至于在模拟器中无法识别。这是模拟器中的内容与实际图像相比的图片：

这是实际图像：

我该如何解决？

Answer 1

我有两个解决方案：

1. 该NativeBase内容组件是一个包装阵营本土滚动型。图像与 ScrollView 一起使用时，必须包含图像的高度和宽度。

2. 如果要排除提及图像的尺寸，请使用View代替Content。

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

Answer 2

您可以使用 Dimension 获取屏幕大小并调整图像大小：

1-进口尺寸：

import { View, Text, Dimensions } from 'react-native'

2-在您的组件中获取对象窗口中的硬件大小

const window = Dimensions.get('window');

3-添加图像尺寸

<Image
     style={{width: window.width, height: window.height}}
     source={require('../images/telula_upclose.jpeg')}
/>

警告：您的图像可能会变形。在图像中使用“resizeMode”道具

您可以查看以下内容以获取更多信息：Image 和 resizeMode 的文档