在React Native中实现可折叠的手风琴效果,可以使用ScrollView和TouchableOpacity组件来实现。以下是一个简单的示例代码:
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
const AccordionCollapse = () => {
const [isCollapsed, setIsCollapsed] = useState(true);
const toggleCollapse = () => {
setIsCollapsed(!isCollapsed);
};
return (
Accordion Header
{!isCollapsed && (
Accordion Content
)}
);
};
const styles = StyleSheet.create({
container: {
padding: 10,
},
header: {
backgroundColor: '#ccc',
padding: 10,
marginBottom: 10,
},
headerText: {
fontSize: 16,
fontWeight: 'bold',
},
content: {
backgroundColor: '#f5f5f5',
padding: 10,
},
contentText: {
fontSize: 14,
},
});
export default AccordionCollapse;
在上述示例中,使用useState钩子来定义一个isCollapsed状态,初始值为true。toggleCollapse函数用于切换isCollapsed状态的值。
在ScrollView中,使用TouchableOpacity来实现可点击的折叠/展开头部。根据isCollapsed的值,决定是否显示内容部分。
通过设置样式,可以自定义头部和内容部分的外观。
注意:上述示例只是一个基本示例,可以根据需要进行扩展和定制。