如何在不拉伸/裁剪 React Native 中的图像的情况下将大图像放入视图中？答案

【问题标题】：How to fit a large Image in a View without stretching/cropping the Image in React Native?如何在不拉伸/裁剪 React Native 中的图像的情况下将大图像放入视图中？
【发布时间】：2019-04-19 11:29:58
【问题描述】：

我想在View 中使用Image 而不会影响其质量。我不想裁剪图像或拉伸它。我也尝试使用ImageBackground。

https://snack.expo.io/r1kJ_rD5V?fbclid=IwAR0CVRu3YyQnbdVo9t2Vy1ygN-fGapT5coCQe-JUARJ3KNkkFNpx0KIh-OI

如果您可以帮助我使用它，请查看上面的链接。

【问题讨论】：

如果您分享一些包含Image 和View 样式的sn-p 代码，我们可以提供帮助。
@sdkcy gist.github.com/shubham6996/…

标签： css image react-native

【解决方案1】：

首先，我们需要获取屏幕宽度的屏幕尺寸；

const { width } = Dimensions.get('window');

之后，我们需要指定一个图像画布来绘制我们的图像，并设置resizeMode = {"contain"}来保持图像的纵横比。

_renderItem = item => {
  return (
    <Image
      style={{
        width: width, // We need to give specific width to place images
        height: '100%', // We need to set height to 100%
      }}
      source={item.images}
      resizeMode={'contain'}
    />
  );
};

现在我们需要将屏幕高度除以70:30；

return (
  <View style={styles.container}>
    <FlatList
      style={{ height: '70%' }} // We need to share the screen height with the View("A small view")
      data={images}
      renderItem={({ item }) => this._renderItem(item)}
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      pagingEnabled={true}
    />
    <View style={{ height: '30%' }}>
      <Text>A small view</Text>
    </View>
  </View>
);

最后一件事是设置一个填充值以将视图与状态栏分开；

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20, // Just for iOS
  },
});

【讨论】：

snack.expo.io/@sdkcy/suspicious-kiwi 工作示例，我分叉了你的项目。

【解决方案2】：

你试过 resizeMode="contain" 还是 "cover"

https://facebook.github.io/react-native/docs/image.html#resizemode

【讨论】：