react-native 自己写的一个table组件

能左右滑动，但是表格的宽度不能动态

1C0179B8-69F5-411E-8548-3F78F19CE5B1.png

稍等整理下上代码

/**

• libin 自定义表格
  */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    ScrollView,
    ListView,
    Dimensions
} from 'react-native';

const {width} = Dimensions.get('window');



export default class Table extends Component {

    state = {
        dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        }),
        titleData: undefined,
    }

    componentWillMount() {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.props.tableData),
            titleData: this.props.titleData,
        });
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.tableData==this.props.tableData){
            return
        }
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(nextProps.tableData),
        });
    }

    render() {
        return (
            
                
                    
                    
                        
                
            
        );
    }


    /**每个item的布局 */
    _renderRow = (rowData) => {
        const arr = []
        for (let i = 0; i < rowData.length-1; i++) {
            arr.push(
                {rowData[i]}
            )
        }
        return ({arr})
    };


    /** 加载头部*/
    _renderHeader = () => {
        const arr = []
        for (let i = 0; i < this.state.titleData.length; i++) {
            arr.push(
                {this.state.titleData[i]}
            )
        }
        return ({arr})
    }
};


const styles = StyleSheet.create({
    container: {
        flex:1,
        width: width,
        backgroundColor: '#fff',
    },
    scrollBoxStyle: {
        width: width - 20,
        marginLeft: 10,
        marginRight: 10,
        paddingTop: 20,
        paddingBottom: 20
    },
    listBoxStyle:{
         flex: 1,
     },
    listViewStyle: {
        marginBottom:20
    },

    BoxStyle: {
        flex: 1,
        backgroundColor: '#f5f5f5',
        flexDirection: 'row',
    },
    topAllBoxStyle: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#fff9e7',
    },
    topTextBoxStyle: {
        padding: 4,
        height: 50,
        width: (width - 20) / 3,
        justifyContent: 'center',
        alignItems: 'center',
    },
    topTextStyle: {
        color: '#666666',
        fontSize: 14,
    },
    cellTextBoxStyle: {
        width: (width - 20) / 3,
        padding: 4,
        marginBottom: 1,
        backgroundColor: '#fff',
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
    },
    cellTextStyle: {
        color: '#666666',
        fontSize: 13,

    },
});