React native之封装 LED数字

如果有更好的书写方式，欢迎提出
废话不多说，直接上代码!!

由于不同手机机型分辨率不同，先写个适配比例不同机型的方法

import { Dimensions, Platform } from 'react-native';
const { height, width } = Dimensions.get('window');
const isWeb = Platform.OS === 'web';
const baseHeight = 667;
const baseWidth = 375;
const HRatio = width / baseWidth;
const VRatio = height / baseHeight;
// 根据手机屏幕的宽度进行比例适配
export const convertX = (width: number) => (isWeb ? width : width * HRatio); 
// 根据手机屏幕的高度进行比例适配
export const convertY = (height: number) => (isWeb ? height : height * VRatio);

思路：
1、将8按下图划分

image.png

utils.js:

export const numPosition = (val, width, border) => {
  const offset = border / 2;
  const all = width + border * 2 * 2;
  const obj = {
    0: { top: offset, left: 0 },
    1: { top: 0, left: offset },
    2: { top: offset, left: 2 * offset + border * 2 + width },
    3: { top: 2 * offset + border * 2 + width, left: offset },
    4: { top: all + offset - border, left: 0 },
    5: { top: (2 * offset + border * 2 + width) * 2, left: offset },
    6: { top: all + offset - border, left: 2 * offset + border * 2 + width },
  };
  return obj[val];
};

export const numToIndex = val => {
  const obj = {
    0: [0, 1, 2, 4, 5, 6],
    1: [2, 6],
    2: [1, 2, 3, 4, 5],
    3: [1, 2, 3, 5, 6],
    4: [0, 2, 3, 6],
    5: [0, 1, 3, 5, 6],
    6: [0, 1, 3, 4, 5, 6],
    7: [1, 2, 6],
    8: [0, 1, 2, 3, 4, 5, 6],
    9: [0, 1, 2, 3, 5, 6],
    10: [3],
    p: [0, 1, 2, 3, 4],
    c: [0, 1, 4, 5],
    l: [0, 4, 5],
    f: [0, 1, 3, 4],
    h: [0, 2, 3, 4, 6],
  };
  return obj[val];
};

export const isOdd = num => {
  return num % 2 !== 0;
};

实现代码：

import React, { useState } from 'react';
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import { convertX, isOdd, numPosition, numToIndex } from '@utils';

interface NumProps {
  num: number; // 显示的文案
  numWidth: number; // numWidth={cx(10)}
  numBorder: number; // 数字一竖杠的边框宽度
  style: StyleProp; // 最外层的样式设置
  color: string; // 数字颜色设置
}

const NumView = (props: NumProps) => {
  const { num = 8, numWidth = convertX(20), numBorder = convertX(4), style} = props;
  const [numTxt, setNumTxt] = useState(numToIndex(num));

  return (
    
      {numTxt.map(item => (
        
          
          
          
        
      ))}
    
  );
};
const styles = StyleSheet.create({
  wrap: {
    position: 'relative',
    backgroundColor: 'red'
  },
  numAbs: {
    position: 'absolute',
  },
  rowLine: {
    backgroundColor: '#fff',
  },
  columnLine: {
    backgroundColor: '#fff',
  },
  commonAngle: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
  },
  leftChoice: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: '#fff',
  },
  rightChoice: {
    borderTopColor: 'transparent',
    borderLeftColor: '#fff',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
  topChoice: {
    borderTopColor: '#fff',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
  bottomChoice: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: '#fff',
    borderRightColor: 'transparent',
  },
});
export default NumView;