React Native UI 组件：如何实现列表视图？

Question

如何在卡片列表中将图像显示为圆形。现在我的列表视图看起来像这样

但我想在此个人资料图片右侧列出文本项。我的反应代码如下

profile.js

const Neighbour =({ neighbours }) =>{
    var { username,do_for_a_living,no_of_mutual_friends,profile_image_url} = neighbours;

    return (
      <Card>
      <CardSection>
      <View style= {styles.thumbnailContainerStyle}>
      <Image style ={styles.thumbnail_style} source={{uri : profile_image_url}} />

      <Text>{username}</Text>
      <Text>{do_for_a_living}</Text>
      <Text>{no_of_mutual_friends} Mutual friends</Text>
      <Button title="Friends" onPress={() =>console.log("clicked")}>
      </Button>
      </View>
      </CardSection>

      </Card>
    );
};

    const styles= StyleSheet.create({
    thumbnail_style :{
        height: 50,
        width:50
    },
    thumbnailContainerStyle:{
        justifyContent: 'center',
        alignItems:'center',
        marginLeft:10,
        marginRight:10
    },
});

Answer 1

要使图像成为圆形，您必须为图像添加 border-radius 样式，并且由于要将所有项目对齐到图像的左侧，因此添加 flexDirection 作为行 在包装器 div 上。您的代码如下：-

const Neighbour =({ neighbours }) =>{
    var { username,do_for_a_living,no_of_mutual_friends,profile_image_url} = neighbours;

    return (
      <Card>
      <CardSection>
      <View style= {styles.thumbnailContainerStyle}>
      <Image style ={styles.thumbnail_style} source={{uri : profile_image_url}} />

      <Text>{username}</Text>
      <Text>{do_for_a_living}</Text>
      <Text>{no_of_mutual_friends} Mutual friends</Text>
      <Button title="Friends" onPress={() =>console.log("clicked")}>
      </Button>
      </View>
      </CardSection>

      </Card>
    );
};

    const styles= StyleSheet.create({
    thumbnail_style :{
        height: 50,
        width:50,
        borderRadius: 25
    },
    thumbnailContainerStyle:{
        justifyContent: 'center',
        alignItems:'center',
        marginLeft:10,
        marginRight:10,
        flexDirection: row
    },
});

更新：-

由于您希望图像左侧的单行中只有一个项目，因此您需要将元素包装在视图中，如下所示：-

const Neighbour =({ neighbours }) =>{
    var { username,do_for_a_living,no_of_mutual_friends,profile_image_url} = neighbours;

    return (
      <Card>
      <CardSection>
      <View style= {styles.thumbnailContainerStyle}>
        <Image style ={styles.thumbnail_style} source={{uri : profile_image_url}} />
        <View style={styles.thumbnailChildWrapper}>
          <Text>{username}</Text>
          <Text>{do_for_a_living}</Text>
          <Text>{no_of_mutual_friends} Mutual friends</Text>
          <Button title="Friends" onPress={() =>console.log("clicked")}>
          </Button>
        </View>
      </View>
      </CardSection>

      </Card>
    );
};

    const styles= StyleSheet.create({
    thumbnail_style :{
        height: 50,
        width:50,
        borderRadius: 25  ==> add this to make image circular
    },
    thumbnailContainerStyle:{
        justifyContent: 'space-between', ==> add space-between so that there is space in text and image
        alignItems:'center',
        marginLeft:10,
        marginRight:10,
        flexDirection: 'row'  ==> add row so that they come in single row
    },
    thumbnailChildWrapper:{
        justifyContent: 'center'
    }
});

Answer 2

您应该为图像添加边框半径，这将是圆形图像，并将您应该在一行中的所有内容对齐，您应该将flexDirection 与row 对齐

       <Card>
   <CardSection>
  <View style= {styles.thumbnailContainerStyle}>
     <Image style ={styles.thumbnail_style} source={{uri : profile_image_url}} />
     <View>
       <Text>{username}</Text>
       <Text>{do_for_a_living}</Text>
       <Text>{no_of_mutual_friends} Mutual friends</Text>
     </View>
     <Button title="Friends" onPress={() =>console.log("clicked")}>
 </View>
 </CardSection>
</Card>
const styles= StyleSheet.create({
thumbnail_style :{
    height: 50,
    width:50,
    borderRadius:50 //add radius
},
thumbnailContainerStyle:{
    justifyContent: 'center',
    alignItems:'center',
    marginLeft:10,
    marginRight:10,
    flexDirection:"row" //align in row
},
});