158-在React-Native中使用Bip39全过程

先装一个expo-cli

npm install -g expo-cli

expo --version

看下版本

然后来创建一个项目

expo init my_rn_bip39_test --npm

装得好慢好慢

初始化项目之后

来看一下

这就是react-native的基本了

如果是在web端

就只用最基本的包就行了

然后我们来装

bip39

web3

ed25519

这3个包

  "dependencies": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7",
    "@solana/web3.js": "^1.41.3",
    "bip39": "^3.0.4",
    "ed25519-hd-key": "^1.2.0"
  },

然后我们来调用一下试试看

  const test01 = async () => {

    const text = "purpose abc abc";
    const valid = bip39.validateMnemonic(text);
    console.log(valid)

    const derivePath = `m/44'/501'/0'/0'`;
    const seed = bip39.mnemonicToSeedSync(text).toString('hex');

    const derivedSeed = ed25519.derivePath(derivePath, seed).key;
    const keypair = web3.Keypair.fromSeed(derivedSeed);
    console.log(keypair.publicKey.toBase58());
  }

刚才说过

在web端这样做是没有问题的

npm run web

调用是成功的

现在我们来试一下android端

看看出了什么问题

npm run android

缺了stream包

那么我们安装一下

然后

 

 缺了superstruct

这边我们要添加一下metro.config.js

const { getDefaultConfig } = require('metro-config');
const path = require('path')

module.exports = (async () => {
    const {
        resolver: { sourceExts },
    } = await getDefaultConfig();
    return {
        resolver: {
            // Add cjs extension so stylis will load.
            sourceExts: [...sourceExts, 'cjs'],
            stream: path.resolve(__dirname, './node_modules/readable-stream'),
        },
        transformer: {
            getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: true,
                },
            }),
        },
    };
})();

然后

 缺了events

再装下events

然后

缺了Buffer

加上全局buffer

import * as web3 from "@solana/web3.js";
import * as bip39 from "bip39";
import * as ed25519 from "ed25519-hd-key";

import buffer from 'buffer';
global.Buffer = buffer.Buffer;

export default function App() {

 

这个时候

这个时候就只能通过rn-nodeify来解决了

rn-nodeify是一个rn的包管理工具

然后会装上很多很多的包

我们装一下吧

npm i rn-nodeify

装完之后就安装一下包

rn-nodeify --install

 

然后我们再来试试

结果

 

 这就是最后一步了

安装一下

react-native-get-random-values

装完之后导入

import "react-native-get-random-values";

import * as web3 from "@solana/web3.js";
import * as bip39 from "bip39";
import * as ed25519 from "ed25519-hd-key";

import buffer from 'buffer';
global.Buffer = buffer.Buffer;

export default function App() {

 运行一下

成功啦！