我有一个包含多列的 FlatList：
<FlatList
numColumns={4}
ItemSeparatorComponent={this.renderSeparator}
...
</FlatList>
还有一个行分隔符：
renderSeparator = () => (
<View
style={{
backgroundColor: 'red',
height: 0.5,
}}
/>
);
但是分隔符只出现在行之间，而不是列之间（即使我添加了width: 0.5
【问题讨论】：
标签： css react-native react-native-flatlist
如果以后有人遇到这种情况，我发现了使用 flexbox 的替代方法。
FlatList 接受 columnwrapperStyle，所以 justifyContent: 'space-around' 的样式就可以了
然后对于在 renderItem 中返回的元素，给出可被 1 整除的 flex，因此如果 numColumns 为 2，您可以将 renderItem 的 flex 设置为大约 0.45
<FlatList
numColumns={2}
ItemSeparatorComponent={() => (
<View style={{ backgroundColor: "green", height: 2 }} />
)}
columnWrapperStyle={{
justifyContent: "space-between",
}}
renderItem={({item, index}) => <View style={{flex: 0.45, height: 120, backgroundColor: '#dedede' }}>
<Text>{index}</Text>
</View>}
/>
【讨论】：
抱歉，我也没有找到使用 flatlist 组件中的属性添加列分隔符的方法。所以我只是在渲染项中添加了文本组件之外的视图，如下所示：
export default class App extends Component {
render() {
return (
<View style={styles.view}>
<FlatList
data={['1', '2', '3', '4', '5', '6', '7', '8']}
numColumns={4}
renderItem={({ item }) => (
<View style={styles.separator}>
<Text style={styles.text}>{item}</Text>
</View>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
view: {
paddingTop: 30,
},
text: {
flex: 1,
fontSize: 40,
textAlign: 'center'
},
separator: {
flex: 1,
borderWidth: 1,
borderColor: 'red'
},
});
结果如下：
我希望这可以帮助你。 :)
【讨论】：
我有点喜欢聚会，但我遇到了同样的问题，并通过使用这个 renderRow 代码解决了这个问题。我在网格视图中有 2 列。请通过替换 index % X === 0 和 index 中的 X 来更改列长度，其中 Y 是 columns-1
renderRow({ item, index }) {
return (
<View style={[styles.GridViewContainer,
index % 2 === 0 ? {
borderLeftWidth: 1, borderLeftColor: 'black',
borderRightWidth: 1, borderRightColor: 'black',}
:
{borderRightWidth: 1, borderRightColor: 'black'}
,{borderBottomWidth: 1, borderBottomColor: 'black'}
,index <= 1 && {borderTopWidth: 1, borderBottomColor: 'black'}
]}
>
... render item code ...
</View>
)
}
【讨论】：
您可以在 renderItems 中添加 if else 条件并检查索引模数以添加分隔符。我只使用这个，一切都很好。
类似：-
_renderItem = ({item,index}) => {
return(
<View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}>
<Text>{item.key}</Text>
</View>
)
}希望这会对你有所帮助。
【讨论】：
您可以为每个项目提供边距，并为容器提供负边距。这是 CSS flex 布局的一个非常常见的技巧。
renderItem = (sale) => {
const {item, index} = sale;
return (
<View style={{flex:1, backgroundColor:'#f00', margin:20}}> ### LOOK AT HERE ###
</View>
)
};
render() {
return (
<View style={{flex:1,}} >
<FlatList
style={{ margin:-20}} ### LOOK AT HERE ###
data={this.state.sales}
numColumns={2}
renderItem={this.renderItem}
/>
</View>
)
}
【讨论】：
我看了your Expo。如下。
1 2 3 4
---------------
5 6 7 8
我假设你想要如下。
1 | 2 | 3 | 4
---+---+---+---
5 | 6 | 7 | 8
要做到这一点，仅ItemSeparatorComponent 是不可能的。
正如 Hazim Ali 所说，每个索引使用不同的样式。
renderItem={({ item, index }) => (
<Text style={[styles.text, index % 4 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'red'}]}>{item}</Text>
)}
--
但是分隔符只出现在行之间，而不是列之间
据我阅读source code， 当 numColumns > 2 时，列之间没有项目分隔符。 项分隔符只在行和行之间。
这里是例子。 当 numColumns 设置为 4 时，四个项目被分组到一个单元格中。 并且在单元格之间放置了一个 itemSeparator。
1 2 3 4 <- cell1
--------------- <- itemSeparator
5 6 7 8 <- cell2
【讨论】：
您可以在您的 Text 组件周围添加一个 View 包装器并将边框样式应用于 View 组件，请参见此处的示例：https://snack.expo.io/HJx68bKvb，尝试在 Expo 的 Android 模拟器中运行，Expo 的 iOS 模拟器由于某种原因没有显示边界正确，但正在我的本地模拟器上工作。
您可以在 View 组件和 Text 组件上使用 padding 来获得所需的边框位置。
【讨论】：