在React Native环境中需要未知模块“crypto”

y1aodyip 于 2023-01-27 发布在 React

关注(0)|答案(7)|浏览(378)

我正在使用react-native编写一个简单的Twitter应用程序。使用twit模块获取Twitter提要和流。下面是代码，它工作正常。但是，当包含在我的react-native应用程序中时，看到错误“需要未知模块“crypto”"。依赖项似乎是myapp-〉twit-〉oauth-〉crypto（这是节点v0.12.2的一部分）。有什么建议可以让它在react-native环境中工作吗？

var Twit = require('twit')
var T = new Twit({
    consumer_key:''
  , consumer_secret:''
  , access_token:''
  , access_token_secret:''
})
var filtered_tweets=[];
var error;
var isSuccess=false;

function getTweets(searchString){
    T.get('search/tweets',{q:searchString, count:100}, getResponse);
    }

function getResponse(err,data,response){
        if(err) { 
            handleGetErr(err); 
        }
        handleGetData(data.statuses);
    }

function handleGetErr(err){

    enter code here

    error = err;
    }

function handleGetData(data){
    data.map(function(tweet){
      var twit={
        twit:tweet.id,
        created_at:tweet.created_at,
        text:tweet.text,
        retweet_count:tweet.retweet_count,
        favorite_count:tweet.favorite_count
      };
      filtered_tweets.push(twit);
    });
    console.log(filtered_tweets);
    isSuccess=true;
}
getTweets("@sahaswaranamam");
module.exports = getTweets;

！[附件][2]

react-native

来源：https://stackoverflow.com/questions/29836434/requiring-unknown-module-crypto-in-react-native-environment

7条答案

按热度按时间

5kgi1eie1#

crypto模块为内置节点模块;React Native在JavaScriptCore（在设备或模拟器上）和Chrome本身（在使用Chrome调试时）上运行JS，因此依赖于内置Node.js模块的模块将无法工作。更多信息请参见React Native文档的JavaScript运行时部分。
我不知道集成到React原生应用程序中有多难，但像Browserify这样的浏览器模块捆绑包通常有核心Node.js模块的浏览器版本，比如this one for crypto。

赞(0）回复(0）举报 2023-01-27

z9gpfhce2#

如果您按照@emmby的建议使用rn-nodeify，则可以使用react-native-crypto。自述文件中的说明如下：
1.安装

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 mvayngrib/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将在项目根目录中创建shim.js

// index.ios.js or index.android.js
// make sure you use `import` and not require!  
import './shim.js'
// ...the rest of your code

但是rn-nodeify也指出：
如果您正在寻找一种更明智的方法，请查看ReactNativify。我自己还没有测试过它，但我认为philikon会很乐意提供帮助
使用ReactNativify创建一个rn-cli.config.js，然后在transformer.js中使用babel-plugin-rewrite-require让Babel转换包依赖关系：

// The following plugin will rewrite imports. Reimplementations of node
// libraries such as `assert`, `buffer`, etc. will be picked up
// automatically by the React Native packager.  All other built-in node
// libraries get rewritten to their browserify counterpart.

[require('babel-plugin-rewrite-require'), {
  aliases: {
    crypto: 'crypto-browserify',
    // ...
  },
  throwForNonStringLiteral: true,
}]

（注：您也可以直接在.babelrc中执行此操作，而无需这两个js文件）*
（注2：虽然ReactNativify是一种更干净的方法，但它仍然给我带来了在RN中为生产用途连接crypto.getRandomValues的问题。

赞(0）回复(0）举报 2023-01-27

eit6fx6z3#

您可以使用rn-nodeify模块在react-native上获取crypto。
将rn-nodeify添加到package.json中的devDependencies：

"devDependencies": {
  "rn-nodeify": "^6.0.1"
}

将以下内容添加到同一文件的scripts部分：

"scripts": {
  …
  "postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}

请注意rn-nodeify将修改您的package.json。
更多信息请访问：https://www.npmjs.com/package/rn-nodeify

赞(0）回复(0）举报 2023-01-27

sq1bmfud4#

React Native packager在幕后使用了Babel，这意味着您可以使用babel-plugin-rewrite-require Babel plugin将所有require('crypto')调用重写为require('crypto-browserify')，假设后者安装在您的node_modules中。
自2016年1月起，您可以使用.babelrc文件来定义可选配置，因此这变得非常简单。首先，安装依赖项：

npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require

然后将插件配置添加到您的.babelrc文件：

{
  "presets": ["react-native"],
  "plugins": [
    ["babel-plugin-rewrite-require", {
      "aliases": {
        "crypto": "crypto-browserify"
      }
    }]
  ]
}

重新启动打包程序，应该就这样了。
这是ReactNativify使用的相同方法，除了这里我们使用.babelrc而不是定义自定义转换器。当ReactNativify被编写时，它不被支持，所以他们不得不使用更复杂的解决方案。请参阅ReactNativify中的这个文件，以获得几乎完整的节点多边形填充列表。

赞(0）回复(0）举报 2023-01-27

fcg9iug35#

我在React Native应用程序中实现Twilio包时遇到了同样的问题，并让React Native打破了加密依赖关系。
作为一个解决方案，我最终创建了一个单独的、独立的Node/Express应用程序来充当我的服务器，并处理我的Twilio逻辑。这样，我就从我的React Native应用程序中删除了所有Twilio逻辑，并将其移到了Node。然后，我就在React Native中使用fetch调用了我的Express路由。这触发了我希望Twilio实现的功能。如果您不熟悉fetch，这里有一个很好的起点-Making AJAX calls with Fetch in React Native
此外，我还有一个关于加密依赖破坏我的应用的问题：
两次React Native无法解析模密码

赞(0）回复(0）举报 2023-01-27

tp5buhyn6#

据我所知，amazon-cognito-identity-js使用crypto-js 3. 3. 0，没有任何额外的魔法......如果那个版本的包可以工作，那么也许可以试试。

赞(0）回复(0）举报 2023-01-27

yh2wf1be7#

在尝试了一系列这样的解决方案之后，我从未真正对其中任何一个感到满意（有些甚至不起作用），我设法偶然发现了react-native-quick-crypto，老实说，它比试图将现有的加密库提升到前端要轻松得多

赞(0）回复(0）举报 2023-01-27