react-native 中带有可折叠部分标题的部分列表
Posted
技术标签:
【中文标题】react-native 中带有可折叠部分标题的部分列表【英文标题】:Section list with collapsible section header in react-native 【发布时间】:2020-10-01 22:13:00 【问题描述】:我使用的是 react-native 版本 0.61.5。我想在 react-native 中做一个带有可折叠标题的部分列表,如下图所示。
这是我的 API 数据格式
data:[
shift_name:'Day',
data:[
id:'1',
fullname: "seela",
inspection_date: "2020-06-10T04:45:32Z",
issues: 1,
response:
shift_name:'Day'
]
,
shift_name:'Afternoon',
data:[
id:'2',
fullname: "Raju vijayan",
inspection_date: "2020-06-9T04:45:32Z",
issues: 3,
response:
shift_name:'Afternoon'
,
id:'3',
fullname: "Pratap P",
inspection_date: "2020-06-8T04:45:32Z",
issues: 2,
response:
shift_name:'Afternoon'
]
]
当我点击标题内容时应该展开和折叠。我如何在 react-native 中做到这一点?
【问题讨论】:
这能回答你的问题吗? Animated Accordion/ Drawer/ Drop-down/ Collapsible-card in React Native 【参考方案1】:使每个项目成为一个组件。
根据您的要求使用 Layoutanimation。
使用状态来管理项目的状态。即,打开和关闭。
const [open, setopen] = useState(false);
最初,项目处于关闭状态。
根据条件显示数据。
逻辑:只有在项目关闭时才需要指定高度。
!open && height: 40
如果它没有打开,请给出标题高度。否则,它将占据它需要的高度。
完整代码
import React, useState from 'react';
import
View, Text, StyleSheet, TouchableOpacity, LayoutAnimation, Platform, UIManager,
from 'react-native';
if (Platform.OS === 'android')
if (UIManager.setLayoutAnimationEnabledExperimental)
UIManager.setLayoutAnimationEnabledExperimental(true);
export default function TestFile()
return (
<View style=styles.container>
<Item />
<Item />
<Item />
<Item />
<Item />
<Item />
</View>
);
function Item()
const [open, setopen] = useState(false);
const onPress = () =>
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setopen(!open);
;
return (
<TouchableOpacity style=[styles.item, !open && height: 40 ] onPress=onPress activeOpacity=1>
<Text>Header</Text>
open && (
<View>
<Text> SOME DATA</Text>
<Text> SOME DATA</Text>
<Text> SOME DATA</Text>
<Text> SOME DATA</Text>
<Text> SOME DATA</Text>
<Text> SOME DATA</Text>
</View>
)
</TouchableOpacity>
);
const styles = StyleSheet.create(
container:
flex: 1,
alignItems: 'center',
padding: 50,
,
item:
width: '100%',
borderWidth: 1,
paddingHorizontal: 20,
overflow: 'hidden',
paddingVertical: 10,
marginBottom: 5,
,
);
结果
【讨论】:
【参考方案2】:我假设您的数据以状态存储,对吗?所以我有一种方法是在你的每个名为isCollapsed
的数据中添加一个附加属性,初始值为true
当单击某个项目的标题时,您将该项目的isCollapsed
设置为相反的值。
那么每个项目的可折叠视图的可见性状态取决于isCollapse
属性。
我的解决方案 :) 希望有所帮助 :)
请检查我的代码:
renderItem = (item, index) =>
return (
<View>
// Header content
<TouchableOpacity
onPress=() =>
let data = this.state;
data = data.map((item, key) =>
if (key === index)
item.isCollapsed = !item.isCollapsed;
return item;
);
this.setState(
data,
);
>
</TouchableOpacity>
// Collapsible content
<View style=
display: (item.isCollapsed) ? 'flex' : 'none'
>
</View>
</View>
);
【讨论】:
以上是关于react-native 中带有可折叠部分标题的部分列表的主要内容,如果未能解决你的问题,请参考以下文章
在 xib 中带有可选 UIImageView 的自定义 UITableViewCell