React Native中无法解析模块crypto。

Question

我已经在这里发布了，使用react-native创建了一个应用程序

react-native init myapp
added web3 in package.json
npm install
react-native run-ios

但我遇到了错误，从web3-eth-accounts无法解析模块“crypto”。有没有方法可以修复此问题。

无法解析“crypto”

- Trinu

Answer 1

Crypto是一个node js模块，在运行React Native时使用Javascript Core，但它不包含在其中。因此，我安装了以下的npm软件包：https://www.npmjs.com/package/react-native-crypto。

使用说明：

npm i --save react-native-crypto
# install peer deps 
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify 
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files 
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings 
./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!  
import './shim.js'
// ...the rest of your code

在你的index.js文件中导入shim.js。

当你这样做后，加密技术应该就可以使用了。如果还是不行，我需要在我的App.js文件中创建一个常量：

export const cryp = require('crypto');

将其导入所需的组件中。

更新

我为此进行了新构建，按照以下步骤进行：

react-native init TestApp

按照上面的说明进行加密操作。

链接：

react-native link

react-native run-ios

- JRK

---

在执行上述步骤并运行react-native run-ios之后，我得到了CFBundleIdentifier不存在的错误。 - Trinu

你正在使用哪个版本的RN？你是否在XCode中打开了该项目？ - JRK

0.57，当我尝试在Xcode中构建时，构建失败了。 - Trinu

我会进行全新的构建，并为您检查。 - JRK

在 app.js 中导入 shim.js 文件的位置在哪里？另外，您能告诉我在 app.js 中添加 export const cryp = require('crypto'); 这行代码的位置吗？我没有 tsx 文件。 - Trinu

让我们在聊天中继续这个讨论。 - JRK

Answer 2

react-native-crypto在较新的react-native版本0.63.3和react版本16.13.1中不再适用。

我在我的react-native应用中使用了crypto-js包，版本为3.1.9-1，工作正常。 您可以在package.json文件中添加以下行。

"crypto-js": "3.1.9-1",

- NinjaDev

---

你是否需要以某种方式将 crypto-js 别名为 crypto？我已经安装了 crypto-js，但是 Metro 仍然告诉我无法解析 crypto。 - Claudio Brasser

@ClaudioBrasser，我没有重命名它。我使用了 crypto-js。 - NinjaDev

你是自己导入了 crypto 还是它被一个库所使用？在我的情况下，crypto 是由一个库所需求的，而我想用 crypto-js 来替换它，因为 crypto 在 rn 中不可用。 - Claudio Brasser

嗯...我使用了 crypto-js 来加密/解密文本。 如果其他库需要 crypto 包，我认为你可以更换另一个库，或者自定义该库以导入 crypto-js。 - NinjaDev

我在 https://github.com/dev0088/Whitings-RN 上分享了示例代码。 - NinjaDev

当我使用crypto-js 4.1.1时，遇到了require cycle警告：WARN Require cycle: node_modules/metro/src/node-haste/DependencyGraph/assets/empty-module.js -> src/pages/index/index.tsx -> src/utils/hzxw-api-client.ts -> node_modules/crypto-js/index.js -> node_modules/crypto-js/core.js -> node_modules/metro/src/node-haste/DependencyGraph/assets/empty-module.js。 - smoothdvd

Answer 3

我有相同的问题，似乎React Native不支持加密模块，因为当我安装crypto时，在node_modules中没有index.js文件。所以当我尝试使用jsonwebtoken（使用加密方法）时遇到了问题。因此，我卸载了jsonwebtoken并转而使用react-native-pure-jwt。

- Mitch.json

Answer 4

crypto是一个Node的库，可以在浏览器中使用，但是我们可以通过下面提到的一些技巧在React Native中使用它。按照以下步骤操作，你就可以准备好开始工作了。

npm i --save react-native-crypto

==>  install peer deps 

npm i --save react-native-randombytes
react-native link react-native-randombytes

==>install latest rn-nodeify 
npm i --save-dev tradle/rn-nodeify

==>  install node core shims and recursively hack package.json files 
==> in ./node_modules to add/update the "browser"/"react-native" fieldwith relevant mappings 
./node_modules/.bin/rn-nodeify --hack --install

- Uzef Shaikh

---

你好，能否解释一下你回答中的最后一行是如何实现的？如何添加shim？我在我的bin/rn-nodify中有以下代码： if (toShim.indexOf('crypto') !== -1) { toShim.push('react-native-randombytes') } - Bomber

你好，@Bomber。你不需要手动添加任何文件，shim文件将会在最后一个命令./node_modules/.bin/rn-nodeify --hack --install执行时自动添加到你的项目根目录中。 - Uzef Shaikh