1

我想在不影响其质量的情况下使用 a Imagein a 。View我不想裁剪图像或拉伸它。我也尝试使用 with ImageBackground。

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

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

4

2 回答 2

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
  },
});
于 2019-04-19T14:12:46.787 回答
0

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

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

于 2019-04-19T11:49:00.103 回答