我一直在努力将类似砖石的风格融入我的应用程序中。
我尝试应用react-native-masonry包裹。但是您必须传递图像网址。
我正在尝试实现相同的样式，但渲染文本而不一定渲染图像。
到目前为止，我已经解决了FlatList，但这是我所能得到的。
<FlatList
data={[
{ id: 1, username: "user1", title: "Title test", heigth: 150 },
{
id: 2,
username: "RH",
title: "Testing the length of a title with an image",
image: "http://localhost:5005/dummy.png",
heigth: 300
},
{ id: 3, username: "john", title: "Another not so long title" },
{
username: "CAF",
title:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
heigth: 600
}
]}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
numColumns={2}
/>;
我将不同的长度硬编码到卡片上，但它们似乎坚持行上的最大高度。
这是我的卡片组件（renderItem）。
_renderItem = ({ item }) => (
<Card style={{ height: item.heigth }}>
<CardItem>
<Left>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
{item.title}
</Text>
</Left>
</CardItem>
<CardItem cardBody style={{ marginBottom: 5 }}>
{!isEmpty(item.image) && (
<Image
source={{ uri: item.image }}
style={{ width: 170, flex: 1, height: 100 }}
/>
)}
</CardItem>
<CardItem>
<Left />
<Body />
<Right>
<Text note>{item.username}</Text>
</Right>
</CardItem>
</Card>
);
Thanks
