必须在 <Text> 组件中呈现不变的违规文本字符串答案

【问题标题】：Invariant violation text strings must be rendered within a <Text> component必须在 <Text> 组件中呈现不变的违规文本字符串
【发布时间】：2020-01-20 12:59:19
【问题描述】：

我是 react-native 开发的新手。每当我尝试使用任何框架时，都会出现错误

必须在 Text 内呈现不变的违规文本字符串组件

我尝试了两个库 react-number-format 和 pichart react-minimal-pie-chart

我知道已经问了很多问题，我尝试了所有问题，但都是关于语法问题，所以我不得不问，因为我认为这与语法无关，因为代码中没有任何空格。

代码如下：

import React, { Component } from 'react';
import { View } from 'react-native';
import NumberFormat from "react-number-format"
import PieChart from react-minimal-pie-chart

export default class Calculation extends Component {
   constructor(props) {
    super(props);
    this.state = {

    };

  render() {
     return (
          <View>
            <View style={{ backgroundColor: "lightgray", height: 1, marginHorizontal: 5 }} />
            <NumberFormat displayType="text" thousandSeparator={true} thousandsGroupStyle="lakh" prefix={'₹'} value={123456789} />

            <PieChart
              data={[
                { title: 'One', value: 10, color: '#E38627' },
                { title: 'Two', value: 15, color: '#C13C37' },
                { title: 'Three', value: 20, color: '#6A2135' },
              ]}
            />
          </View>

        );
    }
}

react-native 版本是"0.60.5"。

我附上了截图供参考。

提前致谢！！！

【问题讨论】：

想知道.. 库 react-minimal-pie-chart react-native 兼容吗？
您使用的是 expo 还是 create-react-native-app ？另外，您能否发布整个组件的代码以及您在哪里使用它？
@AtinSingh 我正在使用 creat-react-native-app。我正在更新代码。

标签： ios reactjs react-native npm pie-chart

【解决方案1】：

好的...所以在看到您的代码后，我没有发现任何问题。所以我去检查了你使用的两个库的源代码。

您使用的两个库都与 react-native 不兼容，因为它们是为用于浏览器的 react js 而设计的，因为它们使用诸如 <div> 和 <input /> 之类的 dom 元素

以 react-number-format 为例，来自 src 的主要 number_format.js 返回

return (
  <input
    {...inputProps}
    ref = {getInputRef}
  />
)

所以，很遗憾，您不能将这些库用于 react-native。

【讨论】：

【解决方案2】：

当您在文本范围之外编写文本时会出现此错误。文本只能写在文本标签中。您使用的库可能不兼容，并且可能会在导致此问题的范围之外呈现文本。

【讨论】：