推荐开源项目:Accordion-Collapse for React Native
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Accordion from 'react-native-collapsible/Accordion';
const styles = StyleSheet.create({
container: {
marginTop: 10,
},
header: {
backgroundColor: '#c8e6c9',
padding: 10,
},
body: {
backgroundColor: '#f1f8e9',
padding: 20,
},
});
const data = [
{
header: 'Component 1',
body: 'Component 1 content',
},
{
header: 'Component 2',
body: 'Component 2 content',
},
// ...
];
const AccordionExample = () => {
const [activeSections, setActiveSections] = React.useState([]);
const renderHeader = (section) => (
<View style={styles.header}>
<Text>{section.header}</Text>
</View>
);
const renderBody = (section) => (
<View style={styles.body}>
<Text>{section.body}</Text>
</View>
);
return (
<Accordion
dataSource={data}
renderHeader={renderHeader}
renderContent={renderBody}
onChange={setActiveSections}
activeSections={activeSections}
underlayColor='#c8e6c9'
/>
);
};
export default AccordionExample;
这个例子展示了如何在React Native中使用react-native-collapsible
库的Accordion
组件来创建一个可折叠的组件列表。它定义了一个简单的数据结构,并使用renderHeader
和renderBody
函数来自定义折叠头部和内容区域的样式和内容。onChange
属性用于更新当前展开的部分,activeSections
属性用于定义初始展开的部分。
评论已关闭