近期表示對React Native（下面簡寫RN）有點興趣
並且也在解除以太坊的資訊，所以打算在寫個RN和Web3JS的App

再來實際開始編寫時，發現了好多好多問題。。。
就讓我們來一一解決吧～

1.創建RN App

這個在我測試時，因為第一次測試的版本和第二次的版本不一樣，而導致許多問題。
所以我用了這個版本的RN：

  • “react”: “16.4.1”
  • “react-native”: “0.56.0”

還有babel的子套件版本

  • “babel-preset-react-native”: “^5”

再來更換.babelrc的設定為：

1
2
3
4
5
{
  "presets": [
    "react-native"
  ]
}

2.安裝Web3JS的環境套件

因為在RN環境中無法使用Nodejs的原生套件，所以需要安裝”node-libs-browser”套件，替代NodeJs的原生套件，使用純JS實作的套件。
然後在專案根目錄中加上一個rn-cli.config.js檔案，內容為：

1
2
3
4
5
const extraNodeModules = require('node-libs-browser');

module.exports = {
  extraNodeModules,
};

再來增加一個global.js檔案，內同為：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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');
  };
}

最後在要使用Web3Js的檔案中加入import Web3 from 'web3'就好咯～

3.請看範例（附加助記詞套件

https://github.com/exia56/web3-rn

知識連結

網路找到的資料：https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766

#Ethereum #React-Native #Web3JS