使用FlatList裁剪图像

Question

图像正在被裁剪，如何防止这种情况发生？请注意，仅显示图像的一半。这是一个Android设备。我不知道这是否也发生在IOS中。但是，针对Android的修复会很棒

我的FlatList组件

import React from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';

const shows_first = [
    {
        key: 1,
        name: 'Suits',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/2432.jpg'
    },
    {
        key: 2,
        name: 'Modern Family',
        image: 'https://static.tvmaze.com/uploads/images/medium_portrait/0/628.jpg'
    },


]

const renderItem = (item) => {
    return (
        <Image style={{ width: 120, height: 100 }} source={{ uri: item.image }} />
    )
}

const List = () => {

    return (

    <View style={{ flex: 1, marginTop: 110 }}>
            <FlatList
                horizontal={true}
                ItemSeparatorComponent={() => <View style={{ width: 5 }}></View>}
                renderItem={({ item }) => renderItem(item)}
                data={shows_first}
            ></FlatList>
        </View>
    )
}

export default List;

Answer 1

您应该使用调整大小模式来选择想要显示图像的方式。 如果您确定所有图像都将是海报，则最好给出适合图像的高度和宽度。 检查下面的代码

const renderItem = (item) => {
  return (
      <Image style={{ width: 80, height: 120 ,resizeMode: 'center'}} source={{ uri: item.image }} />
  )
}

Answer 2

您将需要设置图像的样式以适合高宽比，因此必须添加resizeMode ='contain'

工作示例：https://snack.expo.io/@msbot01/cranky-scones

ActionChain