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 (
            <View style={styles.container}>
                <ScrollView
                    horizontal={true}
                    style={styles.scrollBoxStyle}>
                    <View   style={styles.listBoxStyle}>
                    <ListView
                        enableEmptySections={true}
                        scrollEnabled={false}
                        renderHeader={this._renderHeader}
                        dataSource={this.state.dataSource}
                        renderRow={this._renderRow}
                        //ScrollView或ListView的头部出现莫名其妙的空白，尝试将此属性置为false
                        automaticallyAdjustContentInsets={false}
                        //不显示进度条
                        showsVerticalScrollIndicator={false}
                        style={styles.listViewStyle}
                        />
                        </View>
                </ScrollView>
            </View>
        );
    }


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


    /** 加载头部*/
    _renderHeader = () => {
        const arr = []
        for (let i = 0; i < this.state.titleData.length; i++) {
            arr.push(<View style={styles.topTextBoxStyle} key={i}>
                <Text style={styles.topTextStyle}>{this.state.titleData[i]}</Text>
            </View>)
        }
        return (<View style={styles.topAllBoxStyle}>{arr}</View>)
    }
};


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,

    },
});