在 React Native 中，react-currency-format 因依赖 Web 端 DOM 元素（如 <span>）而无法在 Android/iOS 上正常运行，导致“Text string must be rendered within a <Text> component”错误；应改用专为 RN 设计的替代库。

在 react native 中，`react-currency-format` 因依赖 web 端 dom 元素（如 ``）而无法在 android/ios 上正常运行，导致“text string must be rendered within a `` component”错误；应改用专为 rn 设计的替代库。

react-currency-format 是一个面向 React Web 的库，其源码中当 displayType="text" 时会直接返回 <span>{value}</span>（见官方实现），而 React Native 不支持原生 HTML 标签——所有文本内容必须包裹在 <Text> 组件内，否则在 Android/iOS 上将触发渲染异常。

✅ 正确做法：切换至专为 React Native 优化的格式化库，例如 react-native-format-currency。

✅ 替代方案示例（推荐）

1. 安装适配库：

   

   Ainative React Sdk

   使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

   下载

   npm install react-native-format-currency
   # 或
   yarn add react-native-format-currency

2. 替换原代码中的 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);

// 安全处理空值/NaN const formattedTotal = basketTotal ? formatCurrency({ amount: parseFloat(basketTotal), currency: 'VND', // 越南盾（对应 ₫） locale: 'vi-VN', }) : '₫0';

return (

{items.length} View Basket {formattedTotal} ); };

export default BasketIcon;

### ⚠️ 注意事项

- `react-native-format-currency` 返回的是**纯字符串**（非 JSX 元素），可安全嵌入 `<Text>` 内，完全符合 RN 渲染规则；
- 若需自定义前缀（如 `₫`），建议通过 `formatCurrency` 的 `prefix` 选项或字符串拼接实现（注意避免重复符号）；
- 始终对 `basketTotal` 做空值与类型校验（如 `parseFloat(...)` 后判断 `isNaN()`），防止格式化失败；
- 避免在 RN 项目中混用 Web 专用库（如 `react-currency-format`、`react-input-mask` 等），优先选用 `@react-native-*` 或明确标注支持 RN 的第三方包。

> ? 扩展建议：如需更高定制性（如实时输入格式化），可结合 `TextInput` + `onChangeText` 手动控制格式逻辑，或选用 `react-native-mask-input` 等 RN 原生兼容方案。