Ethereum Walletアプリ 作り方

概要

react-nativeはパッケージをインストールする手順が間違うだけでエラーが出るのでメモ
またweb3もreact-nativeの特定のバージョンだけしか動かない

各種パッケージインストール

react-nativeの導入はこちら

まずpackage.jsonのdependenciesに以下をコピーしてnpm install

{
  "name": "ethereumjs",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "ethereumjs-tx": "^1.3.7",
    "ethereumjs-wallet-react-native": "^0.6.7",
    "node-libs-react-native": "^1.0.3",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-bip39": "^2.3.0",
    "react-native-randombytes": "^3.5.2",
    "react-native-web3-webview": "^1.2.9",
    "vm-browserify": "^1.1.0",
    "web3": "1.0.0-beta.37"
  },
  "devDependencies": {
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

react-native link react-native-randombytes
react-native link react-native-web3-webview

ホームディレクトリ以下にglobal.jsを作成

global.js

import url from "url";
global.URL = class URL {
  constructor(inputUrl) {
    return url.parse(inputUrl);
  }
};

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');
  };
}

あとはこの順番通りにインストール

ローカルDBのrealm

npm i --save realm 
react-native link realm

ui componentのreact-native-elements

npm i --save react-native-elements

画面遷移のreact-navigation

npm i --save react-navigation

あとは頑張って作る