React Native中react-currency-format报Text组件渲染错误的解决方法

问题出在react-currency-format的displayType={'text'}配置在React Native环境下不兼容——React Native的<Text>组件仅允许嵌套文本或其他<Text>组件，而该配置下的组件输出不符合Native端的渲染规则。

修复方案 #

使用组件的renderText属性自定义渲染逻辑，确保最终输出是React Native的<Text>组件：

import { View, Text, TouchableOpacity } from 'react-native'
import React from 'react'
import { useSelector } from 'react-redux'
import { selectBasketItems, selectBasketTotal } from '../features/basketSlice'
import { useNavigation } from '@react-navigation/native'
import NumberFormat from 'react-currency-format';

const BasketIcon = () => {
    const items = useSelector(selectBasketItems);
    const navigation = useNavigation();
    const basketTotal = useSelector(selectBasketTotal);          

  return (
    <View className="absolute bottom-10 w-full z-50">
      <TouchableOpacity className="bg-[#00CCBB] mx-5 p-4 round-lg flex-row items-center space-x-1">
        <Text className=" text-white font-extrabold text-lg bg-[#01A296] py-1 px-2 ">{items.length}</Text>
        <Text className="flex-1 text-white font-extrabold text-lg text-center">View Basket</Text>
        {basketTotal && (
          <NumberFormat
            value={basketTotal}
            thousandSeparator={true}
            prefix={'₫'}
            renderText={(formattedValue) => (
              <Text className="text-lg text-white font-extrabold">{formattedValue}</Text>
            )}
          />
        )}
      </TouchableOpacity>
    </View>
  )
}

export default BasketIcon

关键修改点 #

• 移除了displayType={'text'}配置
• 添加renderText回调，将格式化后的文本包裹在React Native的<Text>组件中，并传递原有的样式类名
• 将NumberFormat组件从原<Text>标签内移出，直接作为同级元素渲染（因为现在它内部已经包含了<Text>）

这样修改后，组件在Web、Android和iOS端都能正常渲染，同时符合React Native的文本渲染规范。

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