CSS 在列之间反应本机 FlatList 分隔符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45580034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native FlatList separator between columns
提问by Avery235
I have a FlatList with multiple columns:
我有一个带有多列的 FlatList：
<FlatList
numColumns={4}
ItemSeparatorComponent={this.renderSeparator}
...
</FlatList>
And a line separator:
和一个行分隔符：
renderSeparator = () => (
<View
style={{
backgroundColor: 'red',
height: 0.5,
}}
/>
);
But the separator only appear between rows, not between columns (even if i add width: 0.5
但是分隔符只出现在行之间，而不出现在列之间（即使我添加 width: 0.5
采纳答案by Hazim Ali
you can just add if else condition inside renderItems and check the index modulus to add separator.. I just use this one and everything works great.
您可以在 renderItems 中添加 if else 条件并检查索引模数以添加分隔符..我只使用这个，一切都很好。
something like :-
就像是 ：-
_renderItem = ({item,index}) => {
return(
<View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}>
<Text>{item.key}</Text>
</View>
)
}hope this will help you.
希望这会帮助你。
回答by Syauqi Rahmat Sugara
Sorry, I also did not find a way to add a column separator using properties in the flatlist component. So I just added the view outside the text component in the render item like this:
抱歉，我也没有找到使用 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'
},
});
And this is the result:
这是结果：
I hope this is can help you. :)
我希望这可以帮助你。:)
回答by Shahzad
I am bit to the party but I ran into same problem and solved this problem by using this renderRow code. I have 2 columns in grid view. Please change column length by replacing X in index % X === 0and index <= Ywhere Y is columns-1
我有点参加派对，但我遇到了同样的问题，并通过使用这个 renderRow 代码解决了这个问题。我在网格视图中有 2 列。请通过替换索引 % X === 0和索引 <= Y中的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>
)
}
回答by noymer
I watched your Expo. It is as below.
我看了你的世博会。如下所示。
1 2 3 4
---------------
5 6 7 8
I assume you want as below.
我假设你想要如下。
1 | 2 | 3 | 4
---+---+---+---
5 | 6 | 7 | 8
To do this, It is not possible with ItemSeparatorComponentonly.
as Hazim Ali says, use different style per index.
要做到这一点，它是不可能的ItemSeparatorComponent。正如 Hazim Ali 所说，每个索引使用不同的样式。
renderItem={({ item, index }) => (
<Text style={[styles.text, index % 4 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'red'}]}>{item}</Text>
)}
--
——
But the separator only appear between rows, not between columns
但是分隔符只出现在行之间，而不出现在列之间
As far as I read the source code, when numColumns > 2, there is no itemseparator between columns. Itemseparator is only between row and row.
据我阅读源代码，当 numColumns > 2 时，列之间没有项目分隔符。Itemseparator 仅在行和行之间。
Here is example. When numColumns is set 4, four items are grouped to one cell. And one itemSeparator is put between cells.
这是示例。当 numColumns 设置为 4 时，四个项目被分组到一个单元格中。一个 itemSeparator 放在单元格之间。
1 2 3 4 <- cell1
--------------- <- itemSeparator
5 6 7 8 <- cell2
回答by dotcomXY
You can add a View wrapper around your Text component and apply borderRight style to the View component, see example here: https://snack.expo.io/HJx68bKvb, try run in the Android emulator on Expo, the Expo's iOS emulator for some reason is not showing the border correctly, but is working on my local emulator.
您可以在 Text 组件周围添加一个 View 包装器并将 borderRight 样式应用于 View 组件，请参见此处的示例：https: //snack.expo.io/HJx68bKvb，尝试在 Expo 上的 Android 模拟器中运行，Expo 的 iOS 模拟器原因没有正确显示边框，而是在我的本地模拟器上工作。
You can play around with padding on View component and Text component to get the desired border position.
您可以在 View 组件和 Text 组件上使用填充来获得所需的边框位置。
回答by Steven Fang
You can provide a margin for each item and a negative margin for the container. This is a very common trick for CSS flex layout.
您可以为每个项目提供一个边距，并为容器提供一个负边距。这是 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>
)
}
