157-在React-Native中使用Bip39

今天要来说一下如何在React-Native中使用Bip39

这个东西研究了整整3天时间

终于研究出来了

但是我很困惑的是

为什么这样的一个东西

网上几乎找不到任何资料

真的难以理解

首先要说一下

网页端和安卓端区别很大

网页端只要安装bip39就可以正常使用了

但是安卓端要安装非常多的东西

并且步骤相当复杂

首先我们来创建一个react-native项目

expo init my_project --npm

这样就创建好了

然后我们新增一些依赖

​
    "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",
    "readable-stream": "^1.0.33",
    "stream": "^0.0.2",
    "stream-browserify": "^1.0.0",
    "events": "^3.3.0",
    "buffer": "^6.0.3",
    "assert": "^2.0.0"
    "react-native-get-random-values": "^1.8.0"

首先是

web3

bip39

ed25519

这三个基本的功能的包

然后是3个stream包

stream

readable-stream

stream-browserify

然后是3个被bip39使用需求的包

buffer

events

assert

然后是一个随机数的包

react-native-get-random-values

然后我们装一下

npm i

这个时候如果运行的话

还是会报一个stream的错误

这个时候我们要装一个react-native的包管理工具包

rn-nodeify

npm i rn-nodeify

装完之后我们来安装一些需要的包

rn-nodeify --install

装完之后我们来写代码

import { StatusBar } from 'expo-status-bar';
import {Button, StyleSheet, Text, View} from 'react-native';

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() {

  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 seed = await bip39.mnemonicToSeedHex(text);

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

  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Button title="test01" onPress={() => test01()}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这样就可以成功了