ReactNative對(duì)于H5開(kāi)發(fā)人員入門比較容易，因?yàn)檎Z(yǔ)法就是JavaScript，對(duì)于Android和iOS開(kāi)發(fā)人員JavaScript需要看基礎(chǔ)部分，RN是基于React框架搭建而成的，通過(guò)官網(wǎng)好好學(xué)一下React，然后了解一下ES6語(yǔ)法，就可以進(jìn)入ReactNative官網(wǎng)學(xué)習(xí)了。
作為一位iOS開(kāi)發(fā)人員，本篇文章主要介紹ReactNative使用FlatList，實(shí)現(xiàn)類似iOS UITableView折疊效果, 用到LayoutAnimation動(dòng)畫, 代碼非常簡(jiǎn)單.

效果圖 :

效果圖.gif

下面是全部代碼 :

import React, {Component} from 'react';
import {
    View,
    Text,
    FlatList,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    LayoutAnimation
} from 'react-native';


export default class FoldList extends Component {

    constructor(props) {
        super(props);
        // 記錄點(diǎn)擊
        this.state = {
            isSelect: -1,
        }
    }

    subItemData = () => {
        let data = [];
        for (let i = 0; i < 5; i++){
            data.push('subItem' + i);
        }
        return data;
    }

    // header點(diǎn)擊
    itemTap = (index) => {

        // 點(diǎn)擊的item如果是同一個(gè), 就置為初始狀態(tài)-1, 也就是折疊的狀態(tài)
        let select = index;
        if (this.state.isSelect === index){
            select = -1;
        }

        // 就這一句話就有動(dòng)畫效果了, 神奇不... , 對(duì)LayoutAnimation不熟悉的可以看上一篇文章.
        LayoutAnimation.easeInEaseOut();
        this.setState({
            isSelect: select
        })
    }

    // 渲染FlatList的item
    renderItem = (item) => {
        const text = '第' + item.index + '個(gè)   ' + item.item.title;
        const itemColor = item.index % 2 === 0 ? 'yellow' : 'tan';
        return (
            <View>
                {/*每組的點(diǎn)擊header*/}
                <TouchableOpacity
                    style={[styles.listItemTouch, {backgroundColor:itemColor}]}
                    activeOpacity={0.6}
                    onPress={() => {this.itemTap(item.index)}}
                >
                    <Text
                        style={styles.listItemText}
                    >
                        {text}
                    </Text>
                </TouchableOpacity>

                {/*每組的折疊item, 相等顯示, 不等隱藏*/}
                {this.state.isSelect === item.index ?
                    <View
                        style={styles.listSubBg}
                    >
                        {
                            this.subItemData().map((subItem, subItemIndex) => {
                                return (
                                    <TouchableOpacity
                                        key={subItemIndex}
                                        style={styles.listSubItemTouch}
                                    >
                                        <Text>
                                            {subItem}
                                        </Text>
                                    </TouchableOpacity>

                                )
                            })
                        }
                    </View> : null}

            </View>
        );
    }

    render () {

        // 數(shù)據(jù)
        let data = [];
        for (let i = 0; i < 100; i++) {
            data.push({
                key: I,
                title: 'title=' + I
            })
        }

        return (
            <View style={styles.bgView}>
                <FlatList
                    style={styles.flatList}
                    ref={(flatList) => (this.flatList = flatList)}
                    keyExtractor={(item, index) => index}
                    data={data}
                    renderItem={this.renderItem}
                />
            </View>
        );
    }
}

const windowW = Dimensions.get('window').width;

const styles = StyleSheet.create({

    bgView: {
        flex: 1
    },

    flatList: {
        flex: 1
    },
    listItemTouch: {
        height: 50,
        width: windowW,
        justifyContent: 'center',
        alignItems: 'center'
    },
    listItemText: {
        textAlign:'center',
        fontSize: 20
    },
    listSubBg: {
        width: windowW,
    },
    listSubItemTouch: {
        marginTop: 2,
        height: 40,
        width: windowW,
        backgroundColor: 'cyan'
    },

});

都擼到這里了, 還不給個(gè)??!