如何在React Native的base64处理中支持特殊字符？

我之前也遇到过react-native-base64库处理非ASCII字符时的编码/解码丢失问题，核心原因是这个库默认只支持单字节的ASCII字符，对UTF-8多字节字符（像你例子里的Ğ）处理不友好，直接截断了多字节数据导致解码后丢失特殊字符。

下面给你两种可靠的解决方案：

方案一：使用原生TextEncoder/TextDecoder实现UTF-8兼容的base64转换 #

React Native 0.60及以上版本已经支持浏览器标准的TextEncoder和TextDecoder API，我们可以基于这个实现完整的UTF-8转base64逻辑：

自定义编码解码函数 #

// 将UTF-8字符串编码为base64
const utf8ToBase64 = (str) => {
  const encoder = new TextEncoder();
  // 把字符串转成UTF-8格式的Uint8Array
  const utf8Bytes = encoder.encode(str);
  // 把Uint8Array转成二进制字符串后再用btoa编码
  return btoa(String.fromCharCode(...utf8Bytes));
};

// 将base64解码回UTF-8字符串
const base64ToUtf8 = (base64Str) => {
  // 先把base64转成二进制字符串
  const binaryStr = atob(base64Str);
  // 把二进制字符串转成Uint8Array
  const bytes = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    bytes[i] = binaryStr.charCodeAt(i);
  }
  // 用TextDecoder解码回UTF-8字符串
  const decoder = new TextDecoder();
  return decoder.decode(bytes);
};

修改你的组件代码 #

替换原来的react-native-base64调用，用上面的自定义函数：

import React from "react";
import { View, Text } from "react-native";

const Decode = () => {
  const string = "asdĞ";
  const encode = utf8ToBase64(string);
  const decode = base64ToUtf8(encode);

  return (
    <View>
      <Text>{"String = " + string}</Text>
      <Text>{"DecodeS = " + decode}</Text>
    </View>
  );
};

// 这里放上面的自定义函数
const utf8ToBase64 = (str) => { /* ... */ };
const base64ToUtf8 = (base64Str) => { /* ... */ };

export default Decode;

方案二：改用支持UTF-8的base64库 #

如果不想自己写函数，可以使用base-64这个库（注意和react-native-base64不是同一个），它可以配合URI编码实现UTF-8支持：

1. 先安装库：

npm install base-64

2. 在组件中使用：

import React from "react";
import { View, Text } from "react-native";
import base64 from 'base-64';

const Decode = () => {
  const string = "asdĞ";
  // 编码：先转UTF-8 URI编码，再转二进制字符串，最后base64编码
  const encode = base64.encode(unescape(encodeURIComponent(string)));
  // 解码：先base64解码，再转URI编码，最后解码回UTF-8字符串
  const decode = decodeURIComponent(escape(base64.decode(encode)));

  return (
    <View>
      <Text>{"String = " + string}</Text>
      <Text>{"DecodeS = " + decode}</Text>
    </View>
  );
};

export default Decode;

两种方案都能解决特殊字符丢失的问题，个人更推荐方案一，因为它基于标准API，不需要额外依赖，代码也更清晰。

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