动效布局背景

更新时间：2021-08-27 11:07:28下载pdf

MagicLayout

MagicLayout具备动态效果的布局模式

示图展示

组件属性

字段名	类型	描述	默认值
renderScene	Func	背景内容	() => {}
renderModalScene	Func	弹框内容	() => {}
showModal	Bool	展示弹框	false
onChange	Func	动画触发回调	() => {}
touchEnableArea	Number	触发区域	100
duration	Number	动画延迟时间	380

使用示例

import React from 'react'
import { MagicLayout } from '@tuya/tuya-panel-electrician-sdk'

export default class Scene extends Component { 
  constructor(props) {
    super(props);

    this.state = {
      showModal: false,
    };
  }

  onChange = (eventName = '') => {
    switch (eventName) {
      case 'close':
        this.setState({ showModal: false });
        break;
      default:
        break;
    }
  };

  renderScene = () => {
    return (
      <View style={{ flex: 1, backgroundColor: 'red' }}>
        <TouchableOpacity
          onPress={() => this.setState({ showModal: !this.state.showModal })}
          style={{ width: 100, height: 100, backgroundColor: 'green' }}
        />
      </View>
    );
  };

  renderModalScene = () => {
    return <View style={{ width, height: height - 150, backgroundColor: 'blue' }} />;
  };

  render() {
    return (
      <MagicLayout
        showModal={this.state.showModal}
        renderScene={this.renderScene}
        onChange={this.onChange}
        renderModalScene={this.renderModalScene}
      />
    );
  }
}

上一篇电工组件库

下一篇扇形列表