React-native中实现折叠效果

版权声明：欢迎评论 https://blog.csdn.net/halaoda/article/details/81666633

要实现这个折叠效果，，首先你需要一个 react-native-collapsible 组件

其实效果很简单，，粘贴即可用，内容自己定义

'use strict';
import React, {Component} from 'react'
import {
    View,
    Text,
    Image,
    ScrollView,
    StyleSheet,
} from 'react-native'
import Accordion from 'react-native-collapsible/Accordion';
import Icon from 'react-native-vector-icons/Ionicons';

const CONTENT = [
    {
        title: '标题1',
        content: '内容1',
    },
    {
        title: '标题2',
        content: '内容2',
    },
    {
        title: '标题3',
        content: '内容3',
    },
    {
       title: '标题4',
        content: '内容4',
    },
    {
       title: '标题5',
        content: '内容5',
    },
];

export default class Fold extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            activeSection: false,
        };
    }

    _setSection(section) {
        this.setState({ activeSection: section });
    }

    _renderHeader(section,isActive) {
        return (
            <View style={styles.active}>
                <Text>{section.title}</Text>
                <Icon name={isActive ? 'ios-arrow-down':'ios-arrow-down'} size={22} color={'#e9e9ef'} style={{paddingHorizontal:p(20)}}/>
            </View>
        );
    }

    _renderContent(section) {
        return (
            <View style={styles.inactive}>
                <Text style={{margin: p(20)}}>{section.content}</Text>
            </View>
        );
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={{flex: 1, paddingTop: p(20), }}>
                    <Accordion
                        activeSection={this.state.activeSection}
                        sections={CONTENT}
                        renderHeader={this._renderHeader}
                        renderContent={this._renderContent}
                        duration={400}
                        onChange={this._setSection.bind(this)}
                    />
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    active: {
        height: p(80),
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#ddd',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexDirection: 'row',
        paddingLeft: p(15),
        backgroundColor: 'rgba(255,255,255,1)',

    },
    inactive: {
        backgroundColor: 'rgba(245,252,255,1)',
    },
})

亲测可以直接使用。。。