在React Native中使用变量渲染unicode字符

Question

我正在尝试呈现一些Unicode形式的阿拉伯文本。

我已经尝试使用

之类的Text组件渲染此图像

const arabic  = "سُبْحَانَ اللهِ وَبِحَمْدِهِ"


render(){
 return(
  <Text>
   {arabic}
  </Text>
 )
}

它按原样呈现Unicode，但是以这种方式编写

render(){
 return(
  <Text>

   &#1587;&#1615;&#1576;&#1618;&#1581;&#1614;&#1575;&#1606;&#1614;  
   #1575;&#1604;&#1604;&#1607;&#1616; 
 &#1608;&#1614;&#1576;&#1616;&#1581;&#1614;&#1605;&#1618;&#1583;&#1616; 
 &#1607;&#1616;

  </Text>
 )
}

提供正确的输出

Answer 1

如果要将unicode字符/ html实体存储在变量中，则需要用unicode号替换html实体。

例如：

const arabic = "س"; 

需要替换为：

const arabic  = "\u0633";

有几个在线unicode表，您可以在其中将html实体转换为原始unicode号。

工作示例：

https://snack.expo.io/BJp-jL004

使用第二种方法进行更新：

您可以使用npm模块html-entities来代替将html实体手动转换为unicode数字的功能。这里最大的好处是，您可以使用常规的<Text>组件来渲染字符。

这里是一个示例：

import { Html5Entities } from 'html-entities'; 
const arabic  = "سُبْحَانَ اللهِ وَبِحَمْدِهِ"

render() {
    const entities = new Html5Entities();
    return (
      <SafeAreaView style={styles.container}>
        <View>
        <Text> {entities.decode(arabic)} </Text>
        </View>
      </SafeAreaView>
    );
  }

输出：

工作示例：

https://snack.expo.io/Hk5b3IykS

Answer 2

Tim提供的解决方案是正确的，但就我而言，某些服务提供了Unicode字符的集合

سُبْحَانَ  
   #1575;للهِ 
 وَبِحَمْدِ 
 هِ

所以转换单个unicode字符然后呈现它是一个繁琐的过程。 为此有一个简单的工作方法， react-native-htmlview

import HTMLView from 'react-native-htmlview';

export default class Myclass extends Componet{

 render(){

  const arabic  = "سُبْحَانَ اللهِ وَبِحَمْدِهِ"

  return(

     <HTMLView
      value={"<div>" +arabic+ "</div>"}
      />

  )

 }

}

呈现所需的输出

Answer 3

您还可以只复制代码中的符号和过去-它将起作用：

 <Text>• one upper case</Text>
 <Text>✔ one lower case</Text>