时间戳

首页 > 解决方案 > 使用 FlatList 裁剪图像

android - 使用 FlatList 裁剪图像

问题描述

图像被裁剪，我该如何防止这种情况发生？请注意，它只出现了图像的一半。这是一个安卓设备。我不知道这是否也发生在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;

标签： androidreact-native

解决方案

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

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

推荐阅读