React Native 之 接口请求

在React Native中，我们可以使用fetch API或第三方库如axios来进行网络请求。以下是使用fetch API的示例代码：

import React, { useState, useEffect } from 'react';
import { Text, View, Button, ActivityIndicator } from 'react-native';
 
const FetchExample = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);
 
  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };
 
  useEffect(() => {
    fetchData();
  }, []);
 
  if (isLoading) {
    return <ActivityIndicator />;
  }
 
  if (data) {
    return (
      <View>
        <Text>Data: {JSON.stringify(data)}</Text>
      </View>
    );
  }
 
  return (
    <View>
      <Button title="Load Data" onPress={fetchData} />
    </View>
  );
};
 
export default FetchExample;

这段代码展示了如何在React Native组件中使用fetch来进行异步网络请求。它还包括了加载状态的处理和错误处理。当用户点击按钮时，会触发fetchData函数，从远程API获取数据，并将其显示在屏幕上。