React Native开发iOS扫码应用如何向后端传递扫描数据

直接在你现有的扫码成功回调里加异步请求逻辑就行，不用重构现有扫码、跳转的核心代码，具体实现如下：

核心实现步骤 #

• 新增submitting状态做提交锁，防止扫码回调连续触发导致重复提交数据
• 把原来同步执行的扫码回调改成async函数，在拿到条码、生成扫描记录后，直接用fetch发POST请求
• 加错误捕获逻辑：提交失败给用户弹提示，支持重试，不要直接静默失败
• 等接口返回成功后再执行页面跳转，避免跳转后请求中断导致数据丢失；如果对扫码速度要求高，也可以先做本地缓存再跳转，后台静默上传

完整可复用代码示例 #

把你原来的Scanner.js内容补充/调整为如下逻辑即可：

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Alert, ActivityIndicator, StyleSheet } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { useNavigation } from '@react-navigation/native';

export default function Scanner() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const navigation = useNavigation();

  // 原有相机权限申请逻辑
  useEffect(() => {
    const getBarCodeScannerPermissions = async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    };
    getBarCodeScannerPermissions();
  }, []);

  // 扫码回调，整合提交逻辑
  const handleBarCodeScanned = async ({ type, data }) => {
    if (submitting) return;
    setScanned(true);
    // 原有扫描记录生成逻辑
    const scanRecord = {
      barcodeContent: data,
      barcodeType: type,
      scanTime: new Date().toISOString(),
      // 可按需补充用户ID、设备信息等其他字段
    };

    try {
      setSubmitting(true);
      // 发起POST请求，替换为你自己的后端接口地址
      const res = await fetch('你的后端接口地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // 接口需要鉴权的话在这里加token等请求头
        },
        body: JSON.stringify(scanRecord)
      });

      if (!res.ok) throw new Error(`服务端返回异常，状态码${res.status}`);
      const serverRes = await res.json();
      
      // 原有跳转逻辑，可携带后端返回的记录ID
      navigation.navigate('Home', {
        scanData: scanRecord,
        recordId: serverRes.id
      });
    } catch (err) {
      Alert.alert(
        '数据提交失败',
        `错误原因：${err.message}，请检查网络后重试`,
        [
          { text: '取消', style: 'cancel', onPress: () => setScanned(false) },
          { text: '重试提交', onPress: () => handleBarCodeScanned({ type, data }) }
        ]
      );
    } finally {
      setSubmitting(false);
    }
  };

  if (hasPermission === null) return <View><Text>申请相机权限中...</Text></View>;
  if (hasPermission === false) return <View><Text>未获取相机权限，请在系统设置中开启后使用</Text></View>;

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned || submitting ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {/* 提交中加载态 */}
      {submitting && (
        <View style={styles.loadingWrap}>
          <ActivityIndicator size="large" color="#fff" />
          <Text style={styles.loadingText}>数据上传中...</Text>
        </View>
      )}
      {/* 原有重新扫码按钮 */}
      {scanned && !submitting && (
        <Button title="重新扫码" onPress={() => setScanned(false)} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  loadingWrap: {
    position: 'absolute',
    top: '45%',
    left: '50%',
    marginLeft: -50,
    alignItems: 'center'
  },
  loadingText: { color: '#fff', marginTop: 12 }
});

开发避坑提示：

• iOS默认拦截HTTP明文请求，如果你用的接口是HTTP地址，需要在项目info.plist里配置ATS安全例外，正式上线必须替换为HTTPS接口
• 类组件示例里的fetch参数、header配置可以直接平移到函数组件里，唯一区别是把this.setState换成useState对应的状态更新方法即可，请求本身的写法没有差异
• 不要把请求逻辑写在组件渲染函数里，必须放在扫码回调、按钮点击事件这类触发式函数中，否则会出现重复请求的问题
• 如果对扫码响应速度要求高，可以先把扫描记录存在本地存储，先跳转到Home页再后台静默上传，减少用户等待时间

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