音乐下拉组件

MusicDrawer 下拉容器组件，可以传入一个数据数组，给定一个选中的 index，组件内部实现选中和取消，并且可以从外部可以监听到 index 值的变化进行操作。

MusicDrawer

• 未选中状态：

  

• 不均分：

  

• 自定义样式：

  

组件公有属性

styles 属性类型

value 属性类型

rightIconSource 属性类型

使用示例

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { MusicDrawer } from '@tuya/tuya-panel-lamp-sdk';
import { TYText } from 'tuya-panel-kit';
import Res from './res';

const MusicDrawers: React.FC = () => {
  const videoListData = ['multi', 'single'];
  const [activeVideoIndex, setActiveVideoIndex] = useState(-1);
  const DrawerData = videoListData.map((item, index) => ({
    id: item,
    leftIconSource: Res[`mode${index + 1}`],
    title: `${getLang('mode')}${index}`,
    rightIconSource: {
      stopIcon: Res.stopIconLight,
      startIcon: Res.startIconLight,
    },
  }));

  const renderActiveContent = (key: string) => {
    if (key === 'multi') {
      return (
        <View style={styles.imgCard} pointerEvents="none">
          <TYText style={{ padding: 20 }}>{getLang('drawerContent')}</TYText>
        </View>
      );
    }
    return (
      <View style={{ height: 50 }} pointerEvents="none">
        <TYText style={{ padding: 20 }}>{`${getLang('drawerContent')}2`}</TYText>
      </View>
    );
  };

  return (
    <View style={styles.container}>
        <MusicDrawer
          value={DrawerData}
          styles={{
            containerStyle: styles.videoContainer,
            contentStyle: styles.videoContent,
            titleStyle: styles.text,
            rightIconBoxStyle: styles.musicBtn,
            leftIconBoxStyle: styles.videoImg,
          }}
          activeIndex={activeVideoIndex}
          onPress={() => console.log('press')}
          onChangeIndex={setActiveVideoIndex}
          height={100}
          renderActiveContent={renderActiveContent}
        />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imgCard: {
    height: 200,
    overflow: 'hidden',
    width: '100%',
  },
  musicBtn: {
    backgroundColor: 'rgba(255,255,255,0.1)',
    borderRadius: 19,
    borderWidth: 0,
    marginRight: 24,
  },
  text: { fontSize: 18 },
  title: {
    marginVertical: 10,
    paddingLeft: 15,
  },
  videoContainer: {
    borderRadius: 16,
    marginBottom: 16,
  },
  videoContent: {
    backgroundColor: '#fff',
    borderRadius: 16,
    paddingLeft: 14,
  },
  videoImg: {
    height: 52,
    marginHorizontal: 12,
    width: 52,
  },
});

export default MusicDrawers;