编辑

Question

我正在开发一个react-native应用程序，并且在渲染大多数从API返回的阿拉伯文本时，我遇到了一个问题，大部分文本看起来像垃圾（请检查屏幕截图1）

几次，它都能正确渲染（请检查屏幕截图2）

截屏1

截屏2

我检查了API响应，它始终正确返回文本。

仅供参考，我正在使用axios来获取数据。

编辑

这是我的axios代码：

const headers = {
  "Content-Type": "application/json",
  Accept: "application/json"
};

const requestBody = {
  msgUID: getMsgUID(),
  uid: this.props.user.uid
};

axios
  .post(Config.FETCH_VISITS_URL, requestBody, { headers: headers })
  .then(response => response.data)
  .then(response => {
    console.log(JSON.stringify(response));

    this.setState({
      loading: false,
      arrayOfVisits: response.visits
    });
  })
  .catch(error => {
    console.log(
      "Error getting documnets",
      error + " msgUID " + requestBody.msgUID
    );
  });

编辑2

这是API响应：

{
    "msgUID": "654894984984",
    "responseTime": 1567253177771,
    "size": 4,
    "visits": [{
            "visitExitTimestamp": "",
            "changeHistory": [],
            "entryType": {
                "vehicleDetails": {},
                "by": ""
            },
            "createdBy": "fz085jMMedPApY0tp9L1e7iqyfO2",
            "visitEntryTimestamp": "",
            "visitStatus": "new",
            "visitTypeObject": {
                "lastName": "السيد",
                "durationAmount": "30",
                "firstName": "علي",
                "phoneNumber": "(123) 456 - 7890",
                "notes": "Test",
                "durationType": "days",
                "type": "person"
            },
            "timestampFrom": "2019-08-28T16:56:00.000Z",
            "isDeleted": false,
            "key": "oTAJ8WbVh54tVaemVoz6",
            "createTime": "2019-08-27T16:56:45.286Z",
            "checkInTime": "",
            "checkOutTime": ""
        },
        {
            "visitExitTimestamp": "",
            "changeHistory": [],
            "entryType": {
                "vehicleDetails": {},
                "by": ""
            },
            "createdBy": "fz085jMMedPApY0tp9L1e7iqyfO2",
            "visitEntryTimestamp": "",
            "visitStatus": "new",
            "visitTypeObject": {
                "lastName": "",
                "durationAmount": "30",
                "firstName": "محمد",
                "phoneNumber": "(123) 456 - 7890",
                "notes": "Test",
                "durationType": "days",
                "type": "person"
            },
            "timestampFrom": "2019-08-28T16:46:00.000Z",
            "isDeleted": false,
            "key": "oTAJ8WbVh54tVaemVoz6",
            "createTime": "2019-08-27T16:46:45.286Z",
            "checkInTime": "",
            "checkOutTime": ""
        }
    ],
    "status": 200,
    "statusString": "OK"
}

下面您可以找到我正在使用的render方法：

renderVisitorName(firstName,lastName) {
      return (
        <Text style={styles.name}>
          {firstName + " " + lastName}
        </Text>
      );
}

我仅在Android上对此进行测试。

Answer 1

我猜想一个UTF处理问题。请检查以下线程，也许您遇到相同的问题：

react-native-base64-encoding-string

Answer 2

似乎您有字符编码问题。您可以使用软件包utf8解决您的问题。当您使用utf8文本时，它将对您有很大帮助。该错误仅是因为您的字体不支持阿拉伯语，因此它返回了奇怪的字符。

首先，将utf8软件包安装为项目中的

npm i --save utf8

另一件事是，如果您在react native中使用自定义font-face，请确保所使用的语言支持您的字体。您也可以使用字体的组合。诸如 •中文 •希伯来语 •印地语 •日文 •韩语

但是，您仍然可以通过使用自定义字体并将编码编码为utf8来解决此问题。您可以找到阿拉伯字体Here。从您的本机样式表中将其设置为font-family，然后尝试一下。

Answer 3

接受的答案对我来说还不清楚。但是我找到了出问题的地方。因此，无论将文本保存到数据库还是发送到服务器的任何位置，都只需在使用utf8发送文本之前进行编码：

首先安装utf8：

yarn add utf8或npm i --save utf8

然后像这样编码

import utf8 from 'utf8';
...


utf8.encode(mytext);

没有必要decode，fonts也没有问题（至少在我的情况下）。

只需再次渲染文本，它就可以工作。

阿拉伯文字无法正确呈现（呈现为垃圾）

编辑

编辑2

3 个答案: