React Native Elements 1.1.0：如何将ListItem圆形头像改为方形并填满高度？

Got it, let's get your ListItem avatar squared up and filling the full height of the list item—since you're on v1.1.0 of React Native Elements, here's exactly what you need to do:

First, the default leftAvatar is rounded because the rounded prop defaults to true. To make it square, you just need to toggle that off. Then, to make it fill the entire height of the ListItem, you'll adjust the avatar's style to take 100% height, plus tweak any padding that might be pushing it away from the edges.

Here's your modified code:

<ListItem
  title={item.name}
  subtitle={item.subtitle}
  leftAvatar={{
    source: { uri: item.icon },
    rounded: false, // Disables the default circular shape
    style: {
      height: '100%', // Fills the full height of the ListItem
      width: 60, // Adjust this value to your desired avatar width
      resizeMode: 'cover' // Ensures the image fits the square without stretching
    }
  }}
  // Optional: Remove vertical padding so the avatar touches top/bottom of the ListItem
  containerStyle={{ paddingVertical: 0 }}
/>

Let me break down the key changes:

• rounded={false}: This directly overrides the default circular avatar shape in v1.1.0.
• height: '100%': Makes the avatar stretch to match the full height of the ListItem. Pair this with a fixed width (like 60) to keep the square aspect ratio.
• resizeMode: 'cover': Prevents your image from getting distorted—this will crop the image to fit the square while maintaining its original proportions.
• containerStyle={{ paddingVertical: 0 }}: The default ListItem has small vertical padding, removing this ensures the avatar sits flush against the top and bottom of the list item.

If you want a fixed height for your ListItem instead of letting the content define it, you can add height: 80 (or your preferred value) to the containerStyle, and set the avatar's height to the same value for a perfect fit.

内容的提问来源于stack exchange，提问作者Mohammad Ali