Nanoid 不能用于react-native

Question

我不知道当我在 React Native 中使用 nanoid 包时到底发生了什么，它显示了某种以下错误。我不确定。

我希望这个社区有人提供帮助。

提前致谢。

场景：我只是导入到nanoid包中。

import { nanoid } from 'nanoid';

Error: React Native does not have a built-in secure random generator. If you don’t need unpredictable IDs use `nanoid/non-secure`. For secure IDs, import `react-native-get-random-values` before Nano ID.    
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\react-native\Libraries\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError   
at node_modules\metro\src\lib\polyfills\require.js:204:6 in guardedLoadModule
at http://192.168.43.19:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&minify=false:203661:3 in global code

Answer 1

添加

react-native-get-random-values

依赖，然后在Nano ID之前导入：

import 'react-native-get-random-values'
import { nanoid } from 'nanoid'

来自 Nano ID 文档：

React Native 没有内置的随机生成器。下列 polyfill 适用于从 39.x 开始的普通 React Native 和 Expo。

检查react-native-get-random-values文档并安装它。导入它 在 Nano ID 之前。

Answer 2

问题已解决

我已经使用以下功能解决了这个问题。

所以我认为在

nanoid

中使用了

crypto

模块，所以在

react-native

中它不存在。

为此，我们需要使用

nanoid/non-secure

模块。下面我也用了

customAlphabet

的方法。

终于成功了。 :)

import { customAlphabet } from 'nanoid/non-secure'; 

const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10); 

Answer 3

您还可以将以下内容导入到您的 App.jsx/tsx 或索引文件中（如果您不介意额外的依赖项）：

import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';

此后，以下内容将在您需要使用它的地方起作用：

import {nanoid} from 'nanoid';

Answer 4

nanoid

使用了 React Native 中不存在的

crypto

。添加这个 polyfill 将解决这个问题。

|

crypto-polyfill.ts

（注意：您也可以使用任何其他加密包代替

expo-crypto

）

import * as Crypto from "expo-crypto";

declare const global: {
  crypto: {
    getRandomValues(array: Uint8Array): Uint8Array;
    randomUUID(): string;
  };
};

export function bootCryptoPolyfill() {
  global.crypto = {
    getRandomValues(array: Uint8Array) {
      return Crypto.getRandomValues(array);
    },
    randomUUID() {
      return Crypto.randomUUID();
    },
  };
}

使用

app.tsx

 之前，请在您的 

nanoid

或其他任何地方调用该函数

bootCryptoPolyfill();