如何做出反应原生 Dapp 松露 - JavaScript

简介

React Native 是 Facebook 推出的一款用于构建原生移动应用的框架。它使用 JavaScript 和 React 来创建高效的移动应用程序，允许开发人员利用一些优秀的 React 工具，例如 React 组件和 JSX，来构建出非常优秀的应用程序。在本篇文章中，我们将探讨如何使用 React Native 开发一个名为“松露”的 Dapp。

步骤

以下是使用 React Native 构建松露 Dapp 的步骤：

步骤1：创建项目

在终端窗口中，使用以下命令创建一个名为“Mushroom”的项目：

npx react-native init Mushroom

该命令将会创建一个名为“Mushroom”的 React Native 项目。

步骤2：编写代码

接下来，我们将开始编写代码。在此之前，请确保您已经安装了 Node 和 React Native。如果您还没有安装，请先通过以下链接安装：

• Node.js
• React Native

我们将专注于以下关键部分：

• 配置 Dapp
• 连接以太坊
• 发送交易
• 接收交易

配置 Dapp

在您的项目中，创建一个 config.js 文件，并在其中定义以下配置：

export const INFURA_ID = 'Your Project ID'
export const CONTRACT_ADDRESS = '0xYourContractAddress'
export const ABI = [
  {
    "constant": false,
    "inputs": [{"name": "input", "type": "string"}],
    "name": "addString",
    "outputs": [],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "getStrings",
    "outputs": [{"name": "", "type": "string[]"}],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  }
]

请记得使用您的 INFURA 项目 ID 和本地部署的智能合约地址进行替换。

连接以太坊

在您的项目中，创建一个名为web3.js的文件，并在其中定义以下代码：

import Web3 from 'web3'
import { INFURA_ID } from './config'

export const web3 = new Web3(
  new Web3.providers.HttpProvider(`https://mainnet.infura.io/v3/${INFURA_ID}`)
)

使用web3对象连接您的以太坊网络。

发送交易

在您的项目中，创建一个名为“MushroomView”的视图，并在其中定义以下代码：

import React, { useState, useEffect } from 'react'
import { View, TextInput, Button } from 'react-native'
import { web3 } from './web3'
import { CONTRACT_ADDRESS, ABI } from './config'

const MyContract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS);

export default function MushroomView() {
  const [inputValue, setInputValue] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSend = async () => {
    setLoading(true)

    const accounts = await web3.eth.getAccounts()
    const account = accounts[0]

    await MyContract.methods.addString(inputValue).send({ from: account })

    setLoading(false)

    setInputValue('')
  }

  return (
    <View>
      <TextInput
        placeholder="Enter text"
        value={inputValue}
        onChangeText={setInputValue}
      />
      <Button title="Send" onPress={handleSend} disabled={loading} />
    </View>
  )
}

该代码将使用您的智能合约对象MyContract连接到以太坊网络，并向智能合约发送交易。

接收交易

在您的项目中，创建一个名为“MushroomView”的视图，并在其中定义以下代码：

import React, { useState, useEffect } from 'react'
import { View, TextInput, Button, Text } from 'react-native'
import { web3 } from './web3'
import { CONTRACT_ADDRESS, ABI } from './config'

const MyContract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS);

export default function MushroomView() {
  const [inputValue, setInputValue] = useState('')
  const [loading, setLoading] = useState(false)
  const [stringArray, setStringArray] = useState([])

  useEffect(() => {
    const getAllStrings = async () => {
      const strings = await MyContract.methods.getStrings().call()
      setStringArray(strings)
    }

    getAllStrings()
  }, [])

  const handleSend = async () => {
    setLoading(true)

    const accounts = await web3.eth.getAccounts()
    const account = accounts[0]

    await MyContract.methods.addString(inputValue).send({ from: account })

    setLoading(false)

    setInputValue('')
  }

  return (
    <View>
      <TextInput
        placeholder="Enter text"
        value={inputValue}
        onChangeText={setInputValue}
      />
      <Button title="Send" onPress={handleSend} disabled={loading} />
      {stringArray.map((string, i) => (
        <Text key={i}>{string}</Text>
      ))}
    </View>
  )
}

该代码将获取您在智能合约中指定的所有字符串，将其存储在stringArray中，并将其在视图中进行渲染。

步骤3：运行项目

在您的终端窗口中，使用以下命令运行您的项目：

npx react-native run-ios

该命令将会运行名为“Mushroom”的 React Native 项目，并在 iOS 模拟器中显示它。

结论

在本文中，我们学习了如何使用 React Native 创建一个名为“松露”的 Dapp。我们使用了以下关键技术：

• 配置 Dapp
• 连接以太坊
• 发送交易
• 接收交易

最终，我们可以将此应用程序部署到以太坊，并在手机上使用它。

参考资料

• React Native
• Web3.js
• Infura