在 React Native Expo 中获取加密未找到错误

Question

我在下面不断收到此错误

ERROR  ReferenceError: Property 'crypto' doesn't exist, js engine: hermes 
    at ContextNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.testlio.deviceverificationapp.Clip&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:145632:24)
    at ExpoRoot (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.testlio.deviceverificationapp.Clip&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:145588:28)
    at App
    at ErrorToastContainer (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.testlio.deviceverificationapp.Clip&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:242934:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.testlio.deviceverificationapp.Clip&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:242437:27)
    at RCTView
    at View (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.testlio.deviceverificationapp.Clip&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:41517:43)
    at RCTView
    at View (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.testlio.deviceverificationapp.Clip&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:41517:43)

每当我尝试在 Xcode 中运行我的

React Native Expo

应用程序时。 我似乎不知道为什么。然而，当我在我的 vscode 上运行

npm run ios

时它就可以工作了

我尝试重新生成 pod 文件，从 pod 文件定义中删除

hermes

，但在 Xcode 上仍然不起作用。

这是我的 React Native Expo 组件

import * as crypto from 'crypto';
import React, { useEffect, useState } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';
import * as Device from 'expo-device';
import { useVerifyDeviceMutation } from './verifyDeviceQuery.generated';

type DeviceVerificationPayload = {
    deviceVariantIdentifier: string;
    deviceOsVersion: string;
};

const encrypt = (payload: DeviceVerificationPayload) => {
    const algorithm = ‘aes-256-cbc’;
    const encryptionAlgoKey = ‘Key’;
    const encryptionKey = base64ToUtf8(encryptionAlgoKey);
    const key = CryptoJS.SHA256(encryptionKey);
    const iv = CryptoJS.lib.WordArray.create(key.words.slice(0, 4));
    const stringifiedPayload = JSON.stringify(payload);
    const cipher = crypto.createCipheriv(algorithm, key, iv); 
    let encrypted = cipher.update(stringifiedPayload, 'utf8', 'hex'); 
    encrypted += cipher.final('hex'); return encrypted;
    return encrypted;
};

export default function HomeScreen() {
    const deviceVerificationGuid = 'deviceVerificationGuid';
    const [isVerifying, setIsVerifying] = useState<boolean>(true);
    const [deviceVerificationFailure, setDeviceVerificationFailure] = useState<boolean>(false);

    const [verifyDevice, { loading }] = useVerifyDeviceMutation({
        onCompleted: () => {
            setIsVerifying(false);
        },
        onError: (data) => {
            setIsVerifying(false);
            setDeviceVerificationFailure(true);
        }
    });

    useEffect(() => {
            const deviceVariantIdentifier = Device.modelName || '';
            const deviceOsVersion = Device.osVersion || '';
            const signature = encrypt({
                deviceVariantIdentifier,
                deviceOsVersion
            });

            verifyDevice({
                variables: {
                    input: {
                        deviceVariantIdentifier,
                        deviceOsVersion,
                        signature,
                        deviceVerificationGuid
                    }
                }
            });
    }, [deviceVerificationGuid, verifyDevice]);

    if (!deviceVerificationGuid) {
        return (
            <View style={styles.container}>
                <Image source={require('./assets/loadicon.gif')} style={styles.image} />
            </View>
        );
    }

    return (
        <View style={styles.container}>
          User Interface Logic
        </View>
    );
}

每当我运行

npm run ios

时，上面的代码都会起作用，但当我在 Xcode 上运行它时，上面的代码会特别失败。
不太确定为什么会发生这种情况

Answer 1

问题来自

import * as crypto from 'crypto';

Crypto

模块仅在服务器端

javascript

应用程序上可用，即在

node

上运行的应用程序。

React

和

React Native

是基于客户端的，因此本机加密库将无法工作。 您可以使用内置的

expo

crypto

库或使用第三方包，例如

crypto-js