Рендеринг символов Юникода в реагировать нативно с помощью переменной

Question

Я пытаюсь визуализировать арабский текст в форме Unicode.

Я уже пытался отрисовать это, используя текстовый компонент, такой как

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

Если вы хотите хранить символы юникода / html-объекты в переменной, вам необходимо заменить html-сущность номером unicode.

Например:

const arabic = "س"; 

необходимо заменить на:

const arabic  = "\u0633";

В Интернете есть несколько таблиц Юникода, в которых вы можете преобразовать свою HTML-сущность в необработанный номер Юникода.

Рабочий пример:

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

ОБНОВЛЕНИЕ со вторым подходом:

Вместо ручного перевода html-сущностей в юникодные числа вы можете использовать модуль npm html-entity . Здесь самое большое преимущество заключается в том, что вы можете использовать обычный компонент <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

Решение, предоставленное Тимом , было правильным, но в моем случае была коллекция символов Юникода, предоставленная какой-то службой

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

так что это был беспокойный процесс, чтобы преобразовать отдельный символ Unicode и затем отобразить его. для этого есть простое решение, реагируют родной-htmlview

import HTMLView from 'react-native-htmlview';

export default class Myclass extends Componet{

 render(){

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

  return(

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

  )

 }

}

, который отображает желаемый результат