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到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
},
});

Answer 2

要使图像成为圆形，您必须为图像添加 border-radius 样式，并且要将所有项目对齐到图像的左侧，然后将 flexDirection添加为行< / strong>在包装器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'
    }
});