React Native最后一列始终显示

时间:2019-12-18 20:41:21

标签: react-native

我在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
    }
});

谢谢

0 个答案:

没有答案