简体中文
简体中文
English
联系我们
注册
登录
layout空间导航

Collapsible 折叠

更新时间:2022-03-01 07:55:02下载pdf

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;

交互演示

Collapsible 折叠

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