2 react native快速指南以及开发经验

接入wallet connect

第一步：add dependencies: @walletconnect/react-native-dapp，以及walletconnect需要的依赖 @react-native-async-storage/async-storage(或者其他合适的storage)

第二步：在根目录加入文件global.ts

import { Platform, LogBox } from 'react-native'

export interface Global { btoa: any atob: any self: any Buffer: any process: any location: any }

declare var global: Global if (typeof global.self === 'undefined') { global.self = global }

if (Platform.OS !== 'web') { require('react-native-get-random-values') LogBox.ignoreLogs([ "Warning: The provided value 'ms-stream' is not a valid 'responseType'.", "Warning: The provided value 'moz-chunked-arraybuffer' is not a valid 'responseType'.", ]) }

global.btoa = global.btoa || require('base-64').encode global.atob = global.atob || require('base-64').decode

global.Buffer = require('buffer').Buffer

global.process = require('process') global.process.env.NODE_ENV = DEV ? 'development' : 'production' global.process.version = 'v9.40'

global.location = { protocol: 'https', }

第三步：如果是expo搭建的项目，需要在根目录加入metro.config.js

module.exports = { resolver: { extraNodeModules: require('expo-crypto-polyfills'), }, }

第四步：修改App.tsx, 用WalletConnectProvider包裹整个app

import './Global'

import WalletConnectProvider from '@walletconnect/react-native-dapp'

import AsyncStorage from '@react-native-async-storage/async-storage'

第五步：主要hook: useWalletConnect

：

踩坑经历：

• 有可能遇到dependencies问题，尝试换npm, yarn reinstall node_modules

• 如果有non-native dependencies, 可以用rn-nodeify 来hack modules

链接：

walletconnet 文档：https://docs.walletconnect.com/quick-start/dapps/react-native

tutorials: 内容有部分outdated，但是大致思路可以借鉴

https://levelup.gitconnected.com/tutorial-how-to-set-up-web3js-1-x-with-react-native-0-6x-2021-467b2e0c94a4

https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766