Expo项目(React Native)扫描WIFI

针对expo框架开发的app项目

1. 首先得有相机去进行扫描这个操作
2. 第一步就是先下载expo-camera（ 一个 React 组件，用于渲染设备的前置或后置摄像头的预览）

npx expo install expo-camera

3. app.json / app.config.js 中配置（下面展示在app.json中新增配置）

{
  "expo": {
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
          "recordAudioAndroid": true
        }
      ]
    ]
  }
}

4.接着到页面中操作：

  import { CameraView, useCameraPermissions } from "expo-camera"; // 引入相机组件、相机权限方法
  
  export default function ScanCode() {
      const [permission, requestPermission] = useCameraPermissions();
      const [facing, setFacing] = useState("back"); // 前置或后置
      if (!permission) {
        return <View />; // 权限没通过，返回空或返回原路由
      }
      
      if (!permission.granted) {
        // 请求用户同意权限
        // 样式自主设置
        // **requestPermission** 调用用户同意方法
        return (
            <View style={styles.container}>
              <Text>我们需要您的相机权限！</Text>
            </View>
            <View style={styles.btns}>
              <Pressable onPress={requestPermission}>
                <Text>同意</Text>
              </Pressable>
              <Pressable>
                <Text>拒绝</Text>
              </Pressable>
            </View>
         );
      }
      return (
        <View style={styles.container}>
          <CameraView
            facing={facing}
            barcodeScannerSettings={{
              barcodeTypes: ["qr"],
            }}
            onBarcodeScanned={(scanned) => {
              console.log("scanned", scanned);
            }}
          >
          </CameraView>
        </View>
      );
  }

5. 通过扫描wifi二维码，得到data，获取了ssid + pwd
6. 温馨提示： 在扫描得到data后，应及时退出扫描，否则系统会一直显示在扫描；另外可以添加扫描线，美化页面样式，看个人需求。