Collapsible 折叠

Collapsible折叠用于展示一个折叠下拉的动画效果。

代码演示

说明：详细 Demo 可参考 Collapsible Demo。

import React from "react";
import { TouchableOpacity, Text, View } from "react-native";
import { Collapsible } from "tuya-panel-kit";

class CollapseScene extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: true,
    };
  }
  onChange = () => {
    console.log("Change");
  };

  tapBtn = () => {
    this.setState({ collapsed: !this.state.collapsed });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity
          onPress={this.tapBtn}
          activeOpacity={0.8}
          style={{
            backgroundColor: "#fff",
            height: 44,
            justifyContent: "center",
            alignItems: "center",
            borderBottomColor: "#eee",
            borderBottomWidth: 1,
          }}
        >
          <Text style={{ color: "#333" }}>Click me</Text>
        </TouchableOpacity>
        <Collapsible
          collapsed={this.state.collapsed}
          onChange={this.onChange}
          align="top"
          // style={{ position: 'absolute', bottom: 0 }}
        >
          <View
            style={{
              borderRadius: 50,
              width: 375,
              height: 300,
              backgroundColor: "#fff",
              justifyContent: "center",
            }}
          >
            <Text
              style={{
                backgroundColor: "#fff",
                textAlign: "center",
                color: "#333",
              }}
            >
              I am Content
            </Text>
          </View>
        </Collapsible>
      </View>
    );
  }
}

export default CollapseScene;

交互演示

API

style

容器样式。

类型	必传	默认值
ViewPropTypes.style	否	无

align

子元素对齐方式。

类型	必传	默认值
top center bottom	否	top

collapsed

是否折叠。

类型	必传	默认值
boolean	否	true

collapsedHeight

需要折叠的高度。

类型	必传	默认值
number	否	0

duration

折叠动画时长。

类型	必传	默认值
number	否	300

easing

动画缓动函数。

类型	必传	默认值
Easing	否	EaseOutCubic

onChange

变更回调方法。

类型	必传	默认值
() => void	否	null

children

要折叠的子元素。

类型	必传	默认值
ReactNode	否	null