我有一个包含多列的 FlatList:
<FlatList
numColumns={4}
ItemSeparatorComponent={this.renderSeparator}
...
</FlatList>
和一个行分隔符:
renderSeparator = () => (
<View
style={{
backgroundColor: 'red',
height: 0.5,
}}
/>
);
但分隔符只出现在行之间,而不出现在列之间(即使我添加width: 0.5
观展 https://snack.expo.io/r171a0PwZ
您可以在 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>
)
}
希望对你有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)