在反应原生环境中需要未知模块“加密”

Question

我正在使用react-native编写一个简单的Twitter应用程序。使用twit模块获取Twitter提要和流。下面是代码，它工作的很好的节点。但是，如果包含在我的react-native应用程序中，则会看到错误“Requiring unknown module”crypto“”。依赖似乎是myapp-> twit-> oauth-> crypto（即节点v0.12.2的一部分）。任何建议，让这个工作在反应本土环境？

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]

Answer 1

的crypto模块是一个内置的节点模块！; React Native在JavaScriptCore上（在设备或模拟器上时）和Chrome本身（在使用Chrome调试时）上运行JS，因此依赖于内置Node.js模块的模块将无法工作。有关更多信息，请参阅React Native文档的the JavaScript Runtime section。

我不确定集成到React Native应用程序会有多困难，但Browserify等浏览器模块打包程序通常具有核心Node.js模块的浏览器版本，如this one for crypto。

Answer 2

在我的React Native应用程序中实现Twilio软件包并让React Native打破加密依赖关系时，我遇到了同样的问题。

作为一项解决方案，我最终创建了一个独立的Node/Express应用程序，充当我的服务器并照顾我所使用的Twilio逻辑。这样我从React Native应用程序中删除了所有Twilio逻辑，并将其移至Node。然后我使用fetch在React Native中调用了我的Express路由，这触发了我想要在Twilio中发生的功能。如果你不熟悉取回这里是一个很好的起点 - Making AJAX calls with Fetch in React Native

此外，这里是我的密码的依赖问题，打破我的应用程序：

twilio-react-native-unable-to-resolve-module-crypto

Answer 3

可以使用rn-nodeify模块获得crypto关于react-native。

添加rn-nodeify您devDependencies在package.json：

"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

Answer 4

如果您正在使用rn-nodeify作为@emmby建议，那么你可以使用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 
   

2. 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还指出：

If you're looking for a saner approach, check out ReactNativify . I haven't tested it myself, but I think philikon will be happy to help

---

随着ReactNativify创建rn-cli.config.js，然后在transformer.js你让使用babel-plugin-rewrite-require巴贝尔变换束依赖关系：

// 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, 
}] 

（注意：您也可以做到这一点在没有这些2 js文件直接在.babelrc）

（注2：虽然ReactNativify是更清洁的方式，它仍然给我接线问题RN的生产使用crypto.getRandomValues。请参阅this question）

Answer 5

React本机打包程序在引擎盖下使用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时，它不被支持，所以他们不得不采用更复杂的解决方案。请参阅this file from ReactNativify以获取几乎完整的节点填充列表。