React Native 集成react-native-table-component(table表格插件)及代码示例

React Native 集成react-native-table-component(table表格插件)及代码示例

1、安装

• 官方链接:https://www.npmjs.com/package/react-native-table-component

#npm安装
npm install --save react-native-table-component

2、使用

1):TableExample.js入口文件

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {Row, Rows, Table} from 'react-native-table-component';
import {Button,Toast} from '@ant-design/react-native';
export default class TableExample extends Component {
    constructor(props) {
        super(...arguments);
    }


    render() {

        const options = {
            tableHead: ['name', 'sum', 'ok', 'no', 'stop', 'other'],
            tableData: [
                ['RN 1',
                    125,
                    110,
                    15,
                    5,
                    <Button type='primary' size='small' onPress={()=>Toast.info('You clicked on me ! !')}>查看</Button>
                ],
                [
                    'RN 2',
                    525,
                    325,
                    200,
                    50,
                    <Button type='primary' size='small' onPress={()=>Toast.info('You clicked on me ! !')}>查看</Button>],
                [
                    'RN 3',
                    800,
                    500,
                    300,
                    100,
                    <Button type='primary' size='small' onPress={()=>Toast.info('You clicked on me ! !')}>查看</Button>],
                [
                    '合计',
                    1450,
                    835,
                    515,
                    155,
                    <Button type='primary' size='small' onPress={()=>Toast.info('You clicked on me ! !')}>查看</Button>]
            ]
        };
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <TouchableOpacity>
                        <Text style={styles.titleStyle}>
                            数量统计
                        </Text>
                    </TouchableOpacity>
                </View>

                <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
                    <Row data={options.tableHead} style={styles.head} textStyle={styles.text}/>
                    <Rows data={options.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: 10,
        textAlign: 'center'
    },
    titleView: {
        height: Platform.OS === 'ios' ? 64 : 44,
        paddingTop: Platform.OS === 'ios' ? 14 : 0,
        marginBottom: 10,
        backgroundColor: '#4a65ff',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row'
    },
    titleStyle: {
        color: 'white',
        fontSize: 15,
        textAlign: 'center'
    }
});

2):效果图

3):本次使用到的第三方库

• @ant-design/react-native(UI库)整合:https://blog.csdn.net/weixin_44187730/article/details/86094459
• react-navigation(导航组件)整合:https://blog.csdn.net/weixin_44187730/article/details/86092782