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,

    },
});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,663评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 前言# Lua api函数的总结要告一段落了,从今天开始我要回归到Lua,我们来一起看看在lua函数里有哪些函数我...
    AlbertS阅读 20,317评论 0 4
  • 打 牌 中国人最引以为骄傲的,不是四大发明,也不是改革开放以来解决了...
    村野闲人阅读 607评论 0 0
  • 我把前几天写的那一篇删了。因为我很不满意。 我感到自己局限在一个小的地方。总有想法要挣脱出去,但挣一会儿就被压制住...
    与乱阅读 351评论 0 0