自适应宽度按钮组件

本文介绍了 IPC 自适应宽度按钮组件相关属性及使用方法，传入控制每行显示多少个按钮，组件自动控制将所有按钮设置为同等宽度显示。

效果展示

组件属性及方法

使用示例

import { TYIpcGridList } from '@tuya/tuya-panel-ipc-sdk';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface itemInterface {
  item: any;
  index: number;
  buttonWidth: number;
}

const IpcGridList: React.FunctionComponent = () => {
  const handlePress = (item: { name: string }) => {
    console.log('click', item.name);
  };

  const renderButton = () => {
    const renderItem = (itemObj: itemInterface) => {
      const { item } = itemObj;
      return (
        <View style={styles.button}>
          <Text style={styles.text}>{item.name}</Text>
        </View>
      );
    };

    const data = [
      { name: 'Button1' },
      { name: 'Button2' },
      { name: 'Button3' },
      { 
        name: 'Button4', 
        prop: { disabled: true } 
        // 当源数据里有prop属性时，prop中是按钮会存在的一些属性，将继承到组件内部的按钮上 
      },
      { name: 'Button5' },
    ];

    return (
      <TYIpcGridList
        onPress={handlePress}
        keyExtractor={(item: { name: string }) => item.name}
        containerVerticalWidth={10}
        data={data}
        renderItem={renderItem}
        rowNumber={2}
      />
    );
  };

  return (
    <View style={styles.container}>
      {renderButton()}
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 5,
    flexDirection: 'row',
    height: 40,
    justifyContent: 'space-between',
    paddingLeft: 5,
    paddingRight: 5,
  },
  container: {
    backgroundColor: '#f8f8f8',
    flex: 1,
  },
  text: {
    color: '#333',
    fontSize: 16,
    marginLeft: 5,
  },
});

export default IpcGridList;