要实现这个折叠效果,,首先你需要一个 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)',
},
})
亲测可以直接使用。。。