答案 0 :(得分:2)
尝试此软件包https://www.npmjs.com/package/react-native-table-component
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
export default class ExampleOne extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['Visite Date', 'Member', 'you ...', 'etc..'],
tableData: [
['07/29/2016', 'JEFF', '$46.80', '...'],
['07/29/2016', 'JEFF', '$46.80', '...'],
['07/29/2016', 'JEFF', '$46.80', '...'],
['07/29/2016', 'JEFF', '$46.80', '...']
]
}
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
<Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
<Rows data={state.tableData} textStyle={styles.text}/>
</Table>
</View>
)
}
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { margin: 6 }
});
答案 1 :(得分:1)
您可以使用react-native-paper library中的 DataTable 。
import { DataTable } from 'react-native-paper';
const MyComponent = () => (
<DataTable>
<DataTable.Header>
<DataTable.Title
sortDirection='descending'>Dessert</DataTable.Title>
<DataTable.Title numeric>Calories</DataTable.Title>
<DataTable.Title numeric>Fat (g)</DataTable.Title>
</DataTable.Header>
</DataTable> );
sortDirection ='下降'将帮助您在标题旁边添加下拉图标。