探索Create React Native Dapp: 以太坊DApp开发的新助力

以下是一个简化的React Native DApp开发示例，展示了如何连接以太坊网络和读取智能合约数据：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Web3 from 'web3';
 
export default function App() {
  const [contractData, setContractData] = useState(null);
 
  useEffect(() => {
    const init = async () => {
      try {
        // 假设已经在MetaMask中设置好了以太坊网络
        const web3 = new Web3(window.ethereum);
        const networkId = await web3.eth.net.getId();
        const contractAbi = ...; // 你的智能合约ABI
        const contractAddress = ...; // 你的智能合约地址
        const contract = new web3.eth.Contract(contractAbi, contractAddress);
 
        // 读取智能合约数据
        const data = await contract.methods.someMethod().call();
        setContractData(data);
      } catch (error) {
        console.error('Error loading contract data:', error);
      }
    };
    init();
  }, []);
 
  if (!contractData) {
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
      </View>
    );
  }
 
  return (
    <View style={styles.container}>
      <Text>Contract Data: {contractData}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

在这个示例中，我们首先导入了必要的React Native和Web3模块。然后，我们使用useEffect和useState钩子处理异步操作，连接到以太坊网络，并读取智能合约数据。我们假设MetaMask插件已经安装在用户的浏览器中，并且网络已经设置好。

请注意，示例中的contractAbi和contractAddress需要替换为你自己的智能合约接口描述语言（ABI）和地址。someMethod()应替换为你想要调用的智能合约方法。