React Native 不规则cell渲染布局

最新推荐文章于 2024-06-03 09:42:13 发布

七月_代码君

最新推荐文章于 2024-06-03 09:42:13 发布

阅读量807

点赞数

分类专栏： react-native 文章标签： react-native 不规则cell renderRow ListView

本文链接：https://blog.csdn.net/weixin_40166364/article/details/78327372

版权

react-native 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

如图，cell左右两边是一样的，但是底部有一个小桌子，这样就导致了cell的整体布局不一样，所以不能使用单独的renderRow来渲染布局，此时我们将数组对象重新转成 [[],[] ]这样的数组格式

/**
 * Created by zhuang.haipeng on 2017/10/24.
 */
import React, {Component} from 'react';
import {
    View,
    TouchableOpacity,
    ListView,
    Dimensions,
    Image,
    Text
} from 'react-native';
const {width, height} = Dimensions.get('window');
const dataArray = [
    {"title": "title1"},
    {"title": "title2"},
    {"title": "title3"},
    {"title": "title4"},
    {"title": "title5"},
];

export default class extends React.Component {

    constructor(props) {
        super(props);
        this.dataSource = new ListView.DataSource({
            //判断这两行是否相同，就是是否发生变化，决定渲染哪些行组件，避免全部渲染，提高渲染效率
            rowHasChanged: (oldRow, newRow) => oldRow !== newRow
        });
        this.state = {
        };
    }

    componentWillMount() {

        // 转换数组[[],[]]这样的格式,拼成这样的数组，到时候数据源是一个大的数组，里面包含两个小数组。这样rowData.length=1, 保证红色小桌子的只渲染一次。
        let tmpListSize = Math.round(dataArray.length / 2);
        let tmpTranslationDataArray = new Array(tmpListSize).fill([]).map((item, index) => {
            let tmpRowArray = [];
            let rowFirstIndex = (index * 2) + 0;
            let rowSecondIndex = (index * 2) + 1;
            tmpRowArray.push(dataArray[rowFirstIndex]);
            if (rowSecondIndex < dataArray.length) {
                tmpRowArray.push(dataArray[(index * 2) + 1]);
            }
            return tmpRowArray
        });
        this.dataSource = this.dataSource.cloneWithRows(tmpTranslationDataArray)
    }

    renderRow = (rowData, sectionID, rowID) => {
        return (
            <View
                style={{
                    width: width,
                    height: 180,
                    marginTop: 0,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor:'pink'
                }}>
                <View style={{
                    position: 'absolute', paddingLeft: 10,
                    paddingRight: 10, bottom: 0,
                    left: 0, width: '100%', height: 54,
                }}>
                    <Image style={{width: '100%', height: 54,top:2}}
                           source={require('../img/cellar/ic_cellar_table.png')}
                    />
                </View>
                <View
                    style={{
                        width: width*0.93,
                        height: 195,
                        justifyContent: 'center',
                        alignItems: 'center',
                        flexDirection: 'row',
                    }}>
                    <TouchableOpacity
                        style={{flex: 1, padding: 10, alignItems: 'center'}}
                        onPress={() => {}}>
                        <View style={{
                            width: 140,
                            height: 140,
                            backgroundColor: '#FFF0',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <View
                                style={{backgroundColor:'#fff',width: 110, height: 110,borderRadius: 4}}>

                            </View>
                        </View>

                        <View style={{flex: 1, height: 40}}>
                            <Text
                                numberOfLines={2}
                                style={{paddingTop: 2,backgroundColor:"#FFF0", paddingBottom: 2, textAlign: 'left', color: '#c9a88d', width:120}}>{rowData[0].title}</Text>
                        </View>
                    </TouchableOpacity>

                    <View style={{width: 10, height: 1}}/>
                    {
                        rowData.length == 2 ? <TouchableOpacity
                            style={{flex: 1, padding:10, alignItems: 'center'}}
                            onPress={() => {}}>
                            <View style={{
                                width: 140,
                                height: 140,
                                backgroundColor: '#FFF0',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}>
                                <View
                                    style={{backgroundColor:'#fff',width: 110, height: 110,borderRadius: 4}}>

                                </View>
                            </View>
                            <View style={{flex: 1, height: 40}}>
                                <Text
                                    numberOfLines={2}
                                    style={{paddingTop: 2, paddingBottom: 2, textAlign: 'left', color: '#c9a88d', backgroundColor:"#FFF0", width: 120}}>{rowData[1].title}</Text>
                            </View>
                        </TouchableOpacity> : <View style={{flex: 1, height: 1, padding: 10}}/>
                    }
                </View>
            </View>
        )
    };

    render() {
        return (
            <ListView
                enableRefresh={true}
                dataSource={this.dataSource}
                renderRow={this.renderRow}
                onRefresh={this.onRefresh}
                onLoadMore={this.onLoadMore}
            />
        );
    }
};