React Native 不规则cell渲染布局

来源：互联网发布：mac安装不了flash 编辑：程序博客网时间：2024/06/07 15:48
如图，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}            />        );    }};
这里写图片描述
阅读全文
0 0