ChargEco/Strides-APP/app/components/TextView.js

/**
 * 自定义Text组件
 * @邠心vbe on 2023/08/30
 */
import React from 'react';
import { Text, View } from 'react-native';
import app from '../../app.json';

const getRadius = (style, fixedAlign) => {
  let s = undefined;
  if (Array.isArray(style)) {
    let res = {}
    for (let s of style) {
      res = {...res, ...s};
    }
    s = res;
  } else {
    s = style
  }
  var view = {}, text = {}
  for (let name in s) {
    if (name.indexOf('margin') >= 0) {
      view[name] = s[name];
      continue;
    }
    if (name.indexOf('padding') >= 0) {
      view[name] = s[name];
      continue;
    }
    if (name.indexOf('color') == 0) {
      text[name] = s[name];
      continue;
    }
    if (name.indexOf('font') >= 0) {
      text[name] = s[name];
      continue;
    }
    if (name.indexOf('border') >= 0) {
      view[name] = s[name];
      continue;
    }
    if (name.indexOf('background') >= 0) {
      view[name] = s[name];
      continue;
    }
    if (name.indexOf('text') >= 0) {
      text[name] = s[name];
      continue;
    } 
    if (name.indexOf('position') >= 0) {
      view[name] = s[name];
      continue;
    }
    if (name.indexOf('line') >= 0) {
      text[name] = s[name];
      continue;
    }
    view[name] = s[name];
  }
  if (fixedAlign) {
    //修复RN0.7x+渲染中文无法对齐
    if (view.alignItems == undefined && view.flexDirection == undefined && text.textAlign == undefined) {
      view.alignItems = "center";
      view.flexDirection = "row";
    }
    if (!text.lineHeight) {
      if (text.fontSize) {
        text.lineHeight = text.fontSize * 1.3;
      } else {
        text.fontSize = 14;
        text.lineHeight = 18.2;
      }
    }
    if (text.fontSize && app.isLumiWhitelabel) {
      text.fontSize -= 2;
    }
    text.includeFontPadding = false;
  }
  return {
    view: view,
    text: text
  }
}

const TextView = ({style, ellipsizeMode, numberOfLines, allowFontScaling=false, onPress, onLongPress, fixedAlign=true, selectable, children}) => {
  const styles = getRadius(style, fixedAlign);
  return (
    <View style={styles.view}>
      <Text
        style={styles.text}
        allowFontScaling={allowFontScaling}
        ellipsizeMode={ellipsizeMode}
        numberOfLines={numberOfLines}
        selectable={selectable}
        onPress={onPress}
        onLongPress={onLongPress}>{children}</Text>
    </View>
  );
};

export default TextView;