如何使用货币符号代码进行本地反应？

Question

这是我的代码

setCurrency() {
    switch (this.props.currency) {
        case USD:
            return '$';
        case AMD:
            return '֏';
        case RUB:
            return '₽';
        default:
            return null;
    }
}

render() {
    return (
        <View style={styles.rowContent}>
            <Text
                style={styles.fontCurrency}>
                {this.props.text} {this.setCurrency()}
            </Text>
        </View>
    );
}

对于美元案例，我得到以下内容。见附图 enter image description here

Answer 1

使用<Text />代码...

setCurrency() {
  switch (this.props.currency) {
    case USD:
      return <Text>&#36;</Text>;
    case AMD:
      return <Text>&#1423;</Text>;
    case RUB:
      return <Text>&#8381;</Text>;
    default:
      return null;
  }
}

Answer 2

为什么不使用现有的API？

在幕后使用它我会创建用于显示货币的格式化组件。

这里的简短例子......

function getLocale(currency) {
  return {
    usd: "en-US",
    rub: "ru-RU",
  }[currency.toLowerCase()];
}

function Currency({ currency, value }) {
  const locale = getLocale(currency);
  const options = {
    currency,
    locale,
    currencyDisplay: "symbol",
    style: "currency",
  };

  return (
    <Text>
      {Number(value).toLocaleString(locale, options)}
    </Text>
  );
}

// Call it like this
<Currency currency="rub" value={100} />