在列之间反应 Native FlatList 分隔符

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

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

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

Answer 2

抱歉，我也没有找到使用 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'
 },
});

这是结果：

希望对您有所帮助。 :)

Answer 3

您可以在 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 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.

--

But the separator only appear between rows, not between columns

据我阅读source code，当 numColumns > 2 时，列之间没有项目分隔符。 Itemseparator仅在行与行之间。

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

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

Answer 5

您可以为每个项目提供边距，为容器提供负边距。这是 CSS 弹性布局的一个非常常见的技巧。

  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 是 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>
    )
  }

Answer 7

万一以后有人遇到这个问题，我发现了一个使用 flexbox 的替代方法。

FlatList 接受 columnwrapperStyle，因此 justifyContent 的样式：'space-around' 可以

然后为 renderItem 中返回的元素提供可被 1 整除的弹性，因此如果 numColumns 为 2，则将 renderItem 的弹性设置为大约 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>}
/>

在列之间反应 Native FlatList 分隔符

React Native FlatList separator between columns

css

react-native

react-native-flatlist