推荐项目:React Native Accordion - 灵活可扩展的折叠组件
以下是一个简单的React Native Accordion组件的示例代码:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Accordion = ({ items, renderHeader, renderContent }) => {
const [activeIndex, setActiveIndex] = React.useState(null);
const toggle = (index) => {
setActiveIndex(activeIndex === index ? null : index);
};
return (
<View>
{items.map((item, index) => (
<View key={index}>
<TouchableOpacity onPress={() => toggle(index)}>
{renderHeader(item, index, activeIndex === index)}
</TouchableOpacity>
{activeIndex === index && (
<View>
{renderContent(item, index)}
</View>
)}
</View>
))}
</View>
);
};
// 使用示例
const App = () => {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<Accordion
items={items}
renderHeader={(item, index, isActive) => (
<Text style={[styles.header, isActive && styles.activeHeader]}>
{item}
</Text>
)}
renderContent={(item, index) => (
<Text style={styles.content}>Content for {item}</Text>
)}
/>
);
};
const styles = StyleSheet.create({
header: {
padding: 10,
backgroundColor: '#f0f0f0',
fontSize: 18,
},
activeHeader: {
backgroundColor: '#e0e0e0',
},
content: {
padding: 10,
backgroundColor: '#ffffff',
fontSize: 16,
},
});
export default App;
这个示例提供了一个简单的折叠组件,它允许用户点击标题来展开或折叠内容区域。renderHeader
和renderContent
属性允许用户自定义外观和行为。在App
组件中展示了如何使用Accordion
组件。
评论已关闭