如何在react native中显示flatList中的网格线
如何在react native中显示flatList中的网格线
提问于 2018-11-27 19:05:52
我有员工的详细信息列表。我需要它们之间的网格线(以表格的形式查看)。如何在react原生中使用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 我需要把它看作一个表格(即有行-列边框)
回答 4
Stack Overflow用户
发布于 2018-11-27 21:07:51
您可以使用FlstList的ItemSeparatorComponent属性
因此，创建一个返回分隔符视图的函数：
renderSeparatorView = () => {
return (
<View style={{
height: 1,
width: "100%",
backgroundColor: "#CEDCCE",
}}
/>
);
};现在在FlatList中使用此方法
<FlatList
...
ItemSeparatorComponent={this.renderSeparatorView}
/>这将创建一个水平分隔视图。
对于垂直分隔符视图，更改样式如下：
style={{
height: 100%,
width: "1",
backgroundColor: "#CEDCCE",
}}Stack Overflow用户
发布于 2019-12-29 20:26:03
我使用下面的renderRow代码解决了这个问题。我在网格视图中有两列。请通过替换索引%X === 0和索引<= Y中的X来更改列长度，其中Y是列-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>
)
}Stack Overflow用户
发布于 2018-11-27 21:13:33
找到一种简单的方法来创建表，我使用react-native-table-component来实现这一点。
import React, { Component } from "react";
import { StyleSheet, View } from 'react-native';
import { Table, TableWrapper, Row, Rows } from 'react-native-table-component';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['SL#', 'Name'],
tableData: [
['1', 'ab'],
['2', 'gh'],
['3', 'asdf'],
]
}
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<Table>
<Row data={state.tableHead} flexArr={[1, 1]} style={styles.head} textStyle={styles.text} />
<TableWrapper style={styles.wrapper}>
<Rows data={state.tableData} flexArr={[1, 1]} style={styles.row} textStyle={styles.text} />
</TableWrapper>
</Table>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
paddingTop: 30,
backgroundColor: '#fff'
},
head: {
height: 40,
backgroundColor: '#f1f8ff'
},
wrapper: {
flexDirection: 'row'
},
title: {
flex: 1, backgroundColor: '#f6f8fa'
},
row: {
height: 28
},
text: {
textAlign: 'center'
}
});你可以在这里阅读更多内容：https://www.npmjs.com/package/react-native-table-component
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53498290
复制相关文章
相似问题
腾讯云开发者
