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

Question

我是反应本机开发的新手。每当我尝试使用任何框架时，我都会收到错误

Invariant violation text strings must be rendered within a Text component

我试了两个库react-number-format and for pichart react-minimal-pie-chart

我知道已经问了很多问题，我都试过了，但都是关于语法问题的，所以我不得不问，因为我认为它与语法无关，因为代码中没有任何白色 space。

代码如下：

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".

为了参考，我附上了屏幕截图。

提前致谢！！！

Answer 1

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

您使用的两个库都与 react-native 不兼容，因为它们是为浏览器的 react js 制作的，因为它们使用 dom 元素，如 <div> 和 <input />

比如以 react-number-format 为例 main number_format.js from src returns

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

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

Answer 2

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

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

Invariant violation text strings must be rendered within a <Text> component

ios

npm

pie-chart

reactjs

react-native