Question

我有一个包含多列的FlatList：

    <FlatList
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      ...
    </FlatList>

一个行分隔符：

  renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'red',
        height: 0.5,
      }}
    />
  );

但是分隔符只出现在行之间，而不是出现在列之间（即使我添加了width: 0.5

View on expo

Answer 1

你可以在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>
   )
}

希望这会对你有所帮助。

Answer 2

很抱歉，我也没有找到使用flatlist组件中的属性添加列分隔符的方法，所以我只是将文本组件外部的视图添加到渲染项中，如下所示：

$("#main")

这就是结果：

我希望这可以帮到你:)。

Answer 3

您可以在Text组件周围添加一个View包装器，并将borderRight样式应用于View组件，请参阅此处示例：https://snack.expo.io/HJx68bKvb，尝试在Expo上的Android模拟器中运行，这是Expo的iOS模拟器某些原因是没有正确显示边框，但正在我的本地模拟器上工作。

您可以在View组件和Text组件上使用填充来获取所需的边框位置。

Answer 4

我看了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>
    )}

This is the complete example

-

但是分隔符只出现在行之间，而不是出现在列之间

据我读source code，当numColumns＆gt; 2，列之间没有item分隔符。 Itemseparator仅在行和行之间。

这是一个例子。当numColumns设置为4时，四个项目被分组到一个单元格。并且一个itemSeparator放在单元格之间。

 1   2   3   4  <- cell1
--------------- <- itemSeparator
 5   6   7   8  <- cell2

Answer 5

您可以为每个项目提供保证金，并为容器提供负保证金。这是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>
    )
  }

Click here to see my work

Answer 6

我很热衷于聚会，但是遇到了同样的问题，并使用此renderRow代码解决了这个问题。我在网格视图中有2列。请通过在 index％X === 0 和 index <= Y 中替换X来更改列长，其中Y为column-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>
    )
  }

列之间的React Native FlatList分隔符

6 个答案: