Question

我有员工详细信息列表。我需要它们之间的网格线（以表格形式查看）。在响应本机中使用flatList怎么可能？

    <View >
                  <View style={Styles.empTab}>
                    <ScrollView horizontal={true} >
                      <View style={Styles.empTable}>
                        <Text>SL#</Text>
                        <FlatList
                          //style={Styles.empData}
                          data={this.state.empData}
                          keyExtractor={item => item.emp_id + ""}
                          renderItem={({ item }) => (
                            <View style={Styles.empitem}>
                              <Text>{item["emp_id"]}</Text>
                            </View>
                          )}
                        />
                      </View>

                      <View style={Styles.empTable}>
                        <Text>Name</Text>
                        <FlatList
                          //style={Styles.empData}
                          data={this.state.empData}
                          keyExtractor={item => item.emp_id + ""}
                          renderItem={({ item }) => (
                            <View  style={Styles.empitem}>
                              <Text>{item["name"]}</Text>
                            </View>
                          )}
                        />
                      </View>
                    </ScrollView>
                  </View>

结果就像

SL#  Name 
1    ab     
2     gh

我需要将其查看为表格（即带有行列边框）

Answer 1

您可以使用ItemSeparatorComponent的{{1}}属性

因此，创建一个将返回分离视图的函数：

FlstList

现在在renderSeparatorView = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#CEDCCE", }} /> ); };

中使用此方法

FlatList

这将创建水平分隔符视图。

对于垂直分隔符视图更改样式，如：

  <FlatList
        ...
        ItemSeparatorComponent={this.renderSeparatorView}
      />

Answer 2

找到了一种创建表的简单方法，我正在使用 react-native-table-component 来实现这一目标。

changeTRUE <- function(vec, buffer){
                 first_TRUE <- which(vec)[1] # get the first TRUE value index
                 i <- 1 # just so we can move on other TRUE values later
                 while(first_TRUE < length(vec)){ # while there are some TRUE
                   vec[(first_TRUE+1):min((first_TRUE+buffer), length(vec))] <- FALSE # put FALSE after the TRUE value according to buffer value (but not further than the end of vec)
                   i <- i+1 # to go to next TRUE
                   first_TRUE <- which(vec)[i] # get next TRUE index...
                 }
                 return(vec)
             }

changeTRUE(vec, 1)
 [1]  TRUE FALSE  TRUE FALSE  TRUE FALSE  TRUE FALSE FALSE  TRUE
changeTRUE(vec, 2)
 [1]  TRUE FALSE FALSE  TRUE FALSE FALSE  TRUE FALSE FALSE  TRUE
changeTRUE(vec, 3)
 [1]  TRUE FALSE FALSE FALSE  TRUE FALSE FALSE FALSE FALSE  TRUE

您可以在此处了解更多信息：https://www.npmjs.com/package/react-native-table-component

Answer 3

这里ItemSeparatorComponent将呈现水平边框，而呈现项将为其垂直边框。以下示例适用于两列，您可以更改 index％2到您的numColumns是什么。就像numColumns是3一样，它将是索引％3

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

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

renderItem={({ item, index }) => (
        <Text style={[styles.text, index % 2 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'black'}]}>{item}</Text>
    )}

Answer 4

我通过使用下面的renderRow代码解决了这个问题。我在网格视图中有2列。请通过在 index％X === 0 和 index <= Y 中替换X来更改列长，其中Y为column-1

{{1}}

如何在React Native中的flatList中显示网格线

4 个答案: