如何在 React Native 中渲染 BULLET 字符

Question

我试图格式化必须在<Text>上显示的数据。这是我formatData()方法：

getFormattedData = (idA, idB) => {
    var formattedData = "";
    if (idA != null && idA != "") {
        formattedData = formattedData + "•" + " " + idA
    }
    if (idB != null && idB != "") {
        formattedData = formattedData + "•" + " " + idB
    }
    return formattedData;
};

但从这个角度来看，这被渲染为ABC • DEF .而不是那么ABC • DEF

当我使用u2B24子弹时，项目符号非常大，而使用2022时，只显示代码。

如何使用getFormattedData()渲染•？

Answer 1

要解析 HTML 实体，您可以使用 npm 模块 html-entities。

import { Html5Entities } from 'html-entities'; 
render() {
    const entities = new Html5Entities();
    return (
      <SafeAreaView style={styles.container}>
        <View>
        <Text> {entities.decode('&#8226;')} </Text>
        </View>
      </SafeAreaView>
    );
  }

Answer 2

这对

我有用，

getFormattedData = (idA, idB) => {
    var formattedData = "";
    if (idA != null && idA != "") {
        formattedData = <div>{formattedData}&#8226;{idA}</div>
    }
    if (idB != null && idB != "") {
        formattedData = <div>{formattedData}&#8226;{idB}</div>
    }
    return formattedData;
};
render() {
    return (
        <div>{this.getFormattedData(12,"abc")}</div>
    );
  }

输出：

•12

•ABC