React-Native开发 安装web3.js 所遇之坑

• 当前环境

os : macOS 10.13.4
react-native-cli 2.0.1
node v8.11.3
web3.js 1.0

• 问题描述： 第一次进行ReactNative开发，对于web3.js进行引入的时候出现报错(报错信息在文章末尾附)，并且尝试了推荐的方法进行卸载清除watchman信息、删除node_modules后进行重新install，错误依旧...

• 解决方案：

  • 1.node，react-native-cli等环境自行安装。
  • 2.安装 node-libs-browser

  npm install --save node-libs-browser
  

  • 3.在项目的根目录下创建一个名为rn-cli.config.js的文件，并将以下代码添加到该文件中：

  const extraNodeModules=require('node-libs-browser');
  
  module.exports={ extraNodeModules};
  

  • 4.在项目的根目录下创建一个名为global.js的文件，并将以下代码添加到该文件中：

  global.Buffer=require('buffer').Buffer;
  global.process=require('process');
  if (typeof btoa === 'undefined') {
    global.btoa = function (str) {
      return new Buffer(str, 'binary').toString('base64');
    };
  }
  if (typeof atob === 'undefined') {
      global.atob = function (b64Encoded) {
      return new Buffer(b64Encoded, 'base64').toString('binary');
    };
  }
  

  • 5.将global.js文件导入到您的App.js文件中：

  import './global.js'
  

  • 6.安装babel-preset-es2015

  npm install --save-dev babel-cli babel-preset-es2015
  

  • 7. 安装web3.js api

  npm install web3 --save
  

  • 8.再次引用Web3即可

  const Web3 = require（' web3 '）;
  

  • 9. react-native run-ios

具体解决方案参考 ：https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766

附：报错信息

屏幕快照 2018-06-22 上午1.54.44.png