使用 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/craky-scones

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Image} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const DATA = [
  {
        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'
    }
];

export default function App() {
  return (
    <View style={styles.container}>
       <FlatList
        data={DATA}
        horizontal={true}
        renderItem={({ item }) => 
          <View style={styles.item}>
            <Image style={{ width: 120, height: 100 }} source={{ uri: item.image }} resizeMode='contain'/>
          </View>
        }
        keyExtractor={item => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});