React Native使用第三方库报错：Invariant violation文本需在<Text>组件内渲染

嘿，作为RN新手碰到这个问题真的挺头疼的，我来帮你梳理下问题所在——你遇到的Invariant violation text strings must be rendered within a <Text> component错误，本质是RN的强制要求：所有可见文本必须包裹在<Text>组件里，但这两个库在RN 0.60.5环境下的适配有坑，咱们一个个解决：

1. 先搞定react-number-format的问题 #

react-number-format虽然号称支持RN，但直接用默认导入的组件可能有问题，尤其是你的RN版本比较早。试试这两种修改方式：

方式一：导入RN专用组件 #

// 替换原来的导入语句，用RN专属的版本
import NumberFormat from 'react-number-format/react-number-format';

这个版本是专门为RN适配的，不需要额外包裹<Text>就能正常渲染。

方式二：给现有组件套个<Text> #

如果不想换导入方式，也可以直接在NumberFormat外层加<Text>：

<Text>
  <NumberFormat 
    displayType="text" 
    thousandSeparator={true} 
    thousandsGroupStyle="lakh" 
    prefix={'₹'} 
    value={123456789} 
  />
</Text>

另外建议检查下你安装的react-number-format版本，RN 0.60.5对新库兼容性有限，最好用^4.3.1这类经过验证的版本（可以通过npm install react-number-format@4.3.1降级）。

2. 重点：react-minimal-pie-chart不支持React Native！ #

这里踩了个常见的坑：react-minimal-pie-chart是给Web端写的，完全没适配RN。它依赖浏览器的SVG环境，而RN里的SVG需要react-native-svg支持，而且这个库本身没有做RN兼容处理，所以直接用肯定会报错（本质是它输出的SVG元素里的文本没有被RN的<Text>包裹，或者RN根本不识别Web的SVG标签）。

给你两个解决方案：

• 推荐：换RN兼容的饼图库，比如react-native-chart-kit或者victory-native，这两个都是专门为RN开发的图表库，开箱即用。
• 如果非要硬用react-minimal-pie-chart：需要安装react-native-svg，然后手动修改库源码把Web SVG标签换成RN的SVG组件，这个操作对新手太复杂，不推荐。

给你写个完整的可用示例 #

我用react-native-chart-kit替换了饼图部分，你可以直接复制试试：

首先安装依赖：

# 用npm的话
npm install react-number-format@4.3.1 react-native-chart-kit react-native-svg@9.13.6 --save
# 用yarn的话
yarn add react-number-format@4.3.1 react-native-chart-kit react-native-svg@9.13.6

然后修改代码：

import React, { Component } from 'react';
import { View, Text, Dimensions } from 'react-native';
// 导入RN专用的NumberFormat
import NumberFormat from 'react-number-format/react-number-format';
// 导入react-native-chart-kit的饼图
import { PieChart } from 'react-native-chart-kit';

export default class Calculation extends Component {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    return (
      <View style={{ padding: 10 }}>
        <View style={{ backgroundColor: "lightgray", height: 1, marginHorizontal: 5, marginVertical: 10 }} />
        {/* 正常使用RN版NumberFormat */}
        <NumberFormat 
          displayType="text" 
          thousandSeparator={true} 
          thousandsGroupStyle="lakh" 
          prefix={'₹'} 
          value={123456789} 
          style={{ fontSize: 18 }}
        />
        {/* 适配RN的饼图 */}
        <PieChart
          data={[
            { name: 'One', population: 10, color: '#E38627' },
            { name: 'Two', population: 15, color: '#C13C37' },
            { name: 'Three', population: 20, color: '#6A2135' },
          ]}
          width={Dimensions.get('window').width - 20}
          height={220}
          chartConfig={{
            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
          }}
          accessor="population"
          backgroundColor="transparent"
          paddingLeft="15"
          center={[10, 10]}
          absolute
          style={{ marginTop: 20 }}
        />
      </View>
    );
  }
}

最后再排查个小细节 #

虽然你说代码没有空格语法问题，但RN对组件之间的空白字符有时候会敏感，比如标签之间的换行空格可能会被当成文本节点。可以检查下你的JSX里有没有多余的空格，不过这个概率比较小，主要还是前面两个库的适配问题。

内容的提问来源于stack exchange，提问作者sohan vanani