每行中的项目将根据其文本大小而变化。 Flatlist用于呈现项目。
TagView.js
<View style={styles.tagView}>
<FlatList
scrollEventThrottle={1900}
data={this.state.interests}
numColumns={5}
renderItem={({ item }) => (
<View style={styles.tag}>
<Text>{item.tagName}</Text>
</View>
)}
keyExtractor={(item, index) => index}
contentContainerStyle={{ paddingBottom: 100 }}
/>
</View>
样式
tagView: {
flex: 1,
flexDirection: "row",
flexWrap: "wrap"
},
tag: {
borderWidth: 1,
borderRadius: 10,
borderColor: "black",
backgroundColor: "white",
padding: 3,
marginTop: 5
}
结果
但是,这里的物品没有按照设备的宽度包装。有包装内容的东西吗?
答案 0 :(得分:3)
带有columnWrapperStyle的FlatList
<FlatList
columnWrapperStyle={styles.tagView}
scrollEventThrottle={1900}
data={this.state.interests}
numColumns={5}
renderItem={({ item }) => (
<View style={styles.tag}>
<Text>{item.tagName}</Text>
</View>
)}
keyExtractor={(item, index) => index}
contentContainerStyle={{ paddingBottom: 100 }}
/>
样式
tagView: {
flexWrap: "wrap"
},
答案 1 :(得分:1)
添加水平支柱并尝试,
<FlatList
scrollEventThrottle={1900}
data={this.state.interests}
numColumns={5}
horizontal={false}
renderItem={({ item }) => (
<View style={styles.tag}>
<Text>{item.tagName}</Text>
</View>
)}
keyExtractor={(item, index) => index}
contentContainerStyle={{ paddingBottom: 100 }}
/>
答案 2 :(得分:0)
为此目的使用ScrollView组件。
<ScrollView contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{tags.map(({ id, name }) => (
<Text key={id}>{name}</Text>
))}
</ScrollView>