Skip to content

Latest commit

 

History

History
144 lines (119 loc) · 10.8 KB

react-native-collapsible.md

File metadata and controls

144 lines (119 loc) · 10.8 KB

模板版本：v0.2.2

react-native-collapsible

Supported platforms License

[!TIP] Github 地址

安装与使用

进入到工程目录并输入以下命令：

npm

npm install [email protected]

yarn

yarn add [email protected]

下面的代码展示了这个库的基本使用场景：

import React, { useState } from 'react';
import { ScrollView, StyleSheet, Text, View, TouchableOpacity,Button } from 'react-native';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
export function CollapsibleExample() {
    const [activeSections, setActiveSections] = useState([0]);
    const [isCollapsed, setIsCollapsed] = useState(true);
    function renderHeader(section: any, _: any, isActive: any) {
        return (<Text>{section.title}</Text>);
    };
    function renderContent(section: any, _: any, isActive: any) {
        return (<Text>{section.content}</Text> );
    }
    return(
        <ScrollView>
         <Accordion
            activeSections={activeSections}
            sections={CONTENT}
            touchableComponent={TouchableOpacity}
            renderHeader={renderHeader}
            renderContent={renderContent}
            duration={400}
            onChange={setActiveSections}
            renderAsFlatList={false}
        />
        <Button title = "open" onPress = {() =>{ setIsCollapsed(!isCollapsed) } } />
            <Collapsible 
                collapsed={isCollapsed}
                onAnimationEnd = { ()=>{ console.log("log:动画结束") } }
                duration = { 100 }
                collapsedHeight = { 0 } >
                <Button title = "aaaaa" />
                <Button title = "bbbbb" />
            </Collapsible>
        </ScrollView>
    );
}
const CONTENT = [
    { title: 'First', feet: '1', content: "a", },
    { title: 'Second', feet: '2', content: "b", },
    { title: 'Third', feet: '3', content: "c", },
];

约束与限制

兼容性

本文档内容基于以下版本验证通过：

  1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
  2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Collapsible

Name Description Type Required Platform HarmonyOS Support
align Alignment of the content when transitioning, can be top, center or bottom enum no All yes
collapsed Whether to show the child components or not boolean no All yes
collapsedHeight Which height should the component collapse to number no All yes
enablePointerEvents Enable pointer events on collapsed view boolean no All yes
duration Duration of transition in milliseconds number no All yes
easing Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions. string | function no All yes
renderChildrenCollapsed Render children in collapsible even if not visible. boolean no All yes
style Optional styling for the container object no All yes
onAnimationEnd Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation function no All yes

Accordion

Name Description Type Required Platform HarmonyOS Support
sections An array of sections passed to the render methods array no All yes
renderHeader(content, index, isActive, sections) A function that should return a renderable representing the header function no All yes
renderContent(content, index, isActive, sections) A function that should return a renderable representing the content function no All yes
renderFooter(content, index, isActive, sections) A function that should return a renderable representing the footer function no All yes
renderSectionTitle(content, index, isActive) A function that should return a renderable representing the title of the section outside the touchable element function no All yes
onChange(indexes) A function that is called when the currently active section(s) are updated. function no All yes
keyExtractor(item, index) Used to extract a unique key for a given item at the specified index. function no All yes
activeSections Control which indices in the sections array are currently open. If empty, closes all sections. array no All yes
underlayColor The color of the underlay that will show through when tapping on headers. Defaults to black. string no All yes
touchableComponent The touchable component used in the Accordion. Defaults to TouchableHighlight object no All yes
touchableProps Properties for the touchableComponent object no All yes
disabled Set whether the user can interact with the Accordion boolean no All yes
align See Collapsible enum no All yes
duration See Collapsible number no All yes
easing See Collapsible string | function no All yes
onAnimationEnd(key, index) See Collapsible. function no All yes
expandFromBottom Expand content from the bottom instead of the top boolean no All yes
expandMultiple Allow more than one section to be expanded. Defaults to false. boolean no All yes
sectionContainerStyle Optional styling for the section container. object no All yes
containerStyle Optional styling for the Accordion container. object no All yes
renderAsFlatList Optional rendering as FlatList (defaults to false). boolean no All yes

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。