在 React Native 中直接使用 react-currency-format 会导致 Android/iOS 渲染错误，因其内部默认返回 <span> 元素；需改用专为 RN 设计的替代库（如 react-native-format-currency）或手动实现格式化逻辑。
在 react native 中直接使用 `react-currency-format` 会导致 android/ios 渲染错误，因其内部默认返回 `` 元素；需改用专为 rn 设计的替代库（如 `react-native-format-currency`）或手动实现格式化逻辑。
react-currency-format 是一个面向 Web 的 React 库，其底层依赖 HTML 原生元素（如 <span>），而 React Native 不支持 DOM 标签。当你设置 displayType={'text'} 时，该库会返回一个 <span> —— 这在 iOS/Android 上无法渲染，从而触发经典错误：
"Text string must be rendered within a
component"
✅ 正确解决方案
方案一：使用专为 React Native 设计的库
推荐安装轻量、维护活跃的 react-native-format-currency：
npm install react-native-format-currency # 或 yarn add react-native-format-currency
改造你的代码如下（替换 NumberFormat）：
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 { formatCurrency } from 'react-native-format-currency';
const BasketIcon = () => {
const items = useSelector(selectBasketItems);
const navigation = useNavigation();
const basketTotal = useSelector(selectBasketTotal);
// 格式化为越南盾（₫），千分位分隔，保留小数
const formattedTotal = basketTotal
? formatCurrency({
amount: parseFloat(basketTotal),
code: 'VND',
withSymbol: true,
thousandSeparator: ',',
decimalSeparator: '.',
})
: '₫0.00';
return (
<View className="absolute bottom-10 w-full z-50">
<TouchableOpacity className="bg-[#00CCBB] mx-5 p-4 rounded-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>
<Text className="text-lg text-white font-extrabold">
{formattedTotal}
</Text>
</TouchableOpacity>
</View>
);
};
export default BasketIcon;⚠️ 注意：react-native-format-currency 返回的是字符串（非 JSX 元素），可安全嵌入 <Text> 内，完全符合 React Native 渲染规则。
方案二：零依赖手动格式化（推荐用于简单场景）
若仅需基础千分位+符号，可用原生 Intl.NumberFormat：
const formatVND = (value: number | string): string => {
const num = Number(value);
if (isNaN(num)) return '₫0.00';
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
currency: 'VND',
minimumFractionDigits: 0,
}).format(num);
};
// 在 JSX 中使用：
<Text className="text-lg text-white font-extrabold">
{basketTotal && formatVND(basketTotal)}
</Text>✅ 优势：无需额外依赖，兼容性好，支持国际化（如 vi-VN 自动适配 ₫ 符号与分隔符）。
? 关键注意事项
- ❌ 避免在 React Native 中使用任何返回 <div> / <span> 的 Web 导向库（包括 react-currency-format、react-number-format 等）；
- ✅ 所有文本内容必须包裹在 <Text> 组件内——这是 RN 的强制约束，不是警告而是运行时错误；
- ? 使用 Intl.NumberFormat 时建议显式指定 locale（如 'vi-VN'），避免不同设备因系统语言导致格式不一致；
- ? 测试务必覆盖 Android 和 iOS 真机/模拟器，Web 可运行 ≠ RN 可运行。
选择方案一（专用库）适合多币种、复杂格式需求；方案二（Intl）更轻量、可控性强，是多数电商类 App 的首选实践。
