我在ScrollView中有一个Table。如何使最后一列始终显示在底部?这样做的想法是,即使用户上下滚动,最后一栏也始终显示。
...
import { Table, TableWrapper, Row, Col, Cell } from 'react-native-table-component';
...
<ScrollView>
<Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row
data={this.state.tableHead}
style={styles.head}
textStyle={styles.text}
widthArr={this.state.widthArr}
/>
{
tableData.map((rowData, index) => (
<TableWrapper key={index} style={styles.row}>
{
rowData.map((cellData, cellIndex) => (
<Cell
key={cellIndex}
data={cellIndex === 1 ? element(cellData, index) : cellData}
textStyle={styles.text}
style={{ width: this.state.widthArr[cellIndex] }}
/>
))
}
</TableWrapper>
))
}
<Col data={lastCol} style={styles.bottomTable} textStyle={{ textAlign: 'right' }} />
</Table>
</ScrollView>
...
const styles = StyleSheet.create({
text: { textAlign: 'center', fontWeight: '100' },
textDesc: { textAlign: 'center', fontWeight: '100', fontSize: 14 },
row: { flexDirection: 'row', height: 40, backgroundColor: '#E7E6E1' },
head: { flexDirection: 'row', height: 40, backgroundColor: '#f1f8ff' },
bottomTable: { flexDirection: 'row', height: 40, backgroundColor: '#ff6666' },
headerText: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 20,
marginTop: 5,
marginBottom: 5
}
});
谢谢