React Native Expo表格数据复制粘贴至Excel格式异常求助

核心方案：手动生成电子表格兼容的文本格式并复制 #

React Native的flex布局导致Text组件复制时自动换行，无法被电子表格识别为多列。我们可以通过生成制表符分隔的文本（电子表格原生支持的格式），再通过剪贴板API复制，既能保留原有flex布局的显示效果，又能实现正确的粘贴格式。

步骤1：生成符合要求的表格文本 #

遍历数据数组，将每一行的单元格用制表符\t分隔，每行结尾用换行符\n拼接，可按需添加表头：

const generateSpreadsheetText = (data) => {
  const header = `姓名\t邮箱\t电话号码\n`;
  const rows = data.map(entry => `${entry.Name}\t${entry.Email}\t${entry.Phonenumber}`).join('\n');
  return header + rows;
};

步骤2：使用Expo剪贴板API实现复制 #

安装并导入expo-clipboard，实现复制功能并添加用户提示：

import * as Clipboard from 'expo-clipboard';
import { ToastAndroid, Alert, Platform } from 'react-native';

const copyToClipboard = async (data) => {
  const spreadsheetText = generateSpreadsheetText(data);
  await Clipboard.setStringAsync(spreadsheetText);
  
  // 提示复制成功
  Platform.OS === 'android' 
    ? ToastAndroid.show('表格数据已复制', ToastAndroid.SHORT)
    : Alert.alert('提示', '表格数据已复制');
};

步骤3：添加复制触发方式 #

可以选择给表格容器加长按事件，或者单独添加复制按钮：

方式1：长按表格复制

<View 
  style={{ flex: 1 }}
  onLongPress={() => copyToClipboard(yourDataList)}
>
  {/* 原有flex布局的表格行 */}
  {yourDataList.map((entry, index) => (
    <View key={index} style={{ flex: 1, flexDirection: 'row' }}>
      <Text style={TextStyles.cell}>{entry.Name}</Text>
      <Text style={TextStyles.cell}>{entry.Email}</Text>
      <Text style={TextStyles.cell}>{entry.Phonenumber}</Text>
    </View>
  ))}
</View>

方式2：添加复制按钮

<Button 
  title="复制表格数据" 
  onPress={() => copyToClipboard(yourDataList)}
  style={{ marginVertical: 16 }}
/>

方案有效性说明 #

Excel、谷歌表格等电子表格程序原生支持制表符\t分隔单元格、换行符\n分隔行的文本格式，粘贴时会自动将内容拆分到对应的行列，完全匹配HTML表格的复制效果。同时不需要引入HTML渲染组件，避免了Expo打包和应用商店提交的潜在问题。

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