Tag: 指数

带有滚动功能的React Native中的可折叠手风琴样式导航

我发现在React Native中找到一个好的，高性能，手风琴风格的导航组件有点困难，这不太复杂。 Oblador有一个相当不错的产品，但是它没有考虑滚动视图中的项目。 我希望能够做的是在用户设备的顶部设置适当的手风琴菜单项，并显示其子类别菜单项。 我在Expnent的Codepen式Snack应用程序中构建了它的精简版，并在此处将其作为开放源代码git repo的更全功能版本。 它是使用标准的react native入门指南构建的，因此您可以遵循这些指示来启动和运行项目。 该代码有很好的注释，但实际上它是由三个部分组成： scroll accordion ，其中包含包含subcategory links touts 。 当您单击某个功能区时，该功能区将滚动到用户设备的顶部，而不管他们在scrollView中的滚动位置如何，并在子类别链接列表中添加动画效果。 棘手的部分是尝试使代码保持动态，以便您的吹捧者可以是任意高度，并且子类别链接的数量可以随类别的不同而变化。 本示例尝试通过在必要时使用PureComponents来执行此操作，并且仅在初始布局上进行尺寸计算，以便在实际单击tout时，我们要做的就是随着子类别链接容器的动画高度和查看滚动。 如果单击另一个提示，我仍然需要实现自动关闭上一个子类别链接容器的功能。 除此之外，还有代码。 让我知道您是否有任何疑问或改进。 “使用严格” 从’react’导入React，{组件}; 从’react-native’导入{AppRegistry，Animated，Dimensions，Easing，Image，Text，View，StyleSheet，TouchableOpacity，ScrollView}； const categoryLinks = [//为简单起见，我们对所有tout使用相同的类别链接集 {标签：’Subcategory1′}， {标签：’Subcategory2′}， {标签：’Subcategory3′}， {标签：’Subcategory4′}， {标签：’Subcategory5′}， {标签：’Subcategory6′}， {标签：’Subcategory7′}， {标签：’Subcategory8′}， {标签：’Subcategory9′}， {标签：’Subcategory10′}， ] const categoryTouts = [// touts是保存我们链接的可点击图像项 {image：require（’./ assets / images / image01.jpg’），标题：“ Category1”，链接：categoryLinks}， {image：require（’./ assets / images […]