React Native异步数据加载及状态管理示例

本示例演示了在React Native应用中如何进行异步数据加载和状态管理，以提高用户体验。通过使用React Hooks和Axios库，实现了从API获取数据并展示在应用中的功能。

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import axios from 'axios';

const DataLoadingScreen = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <View>
      {loading ? (
        <ActivityIndicator size="large" />
      ) : (
        <View>
          <Text>{data.title}</Text>
          <Text>{data.description}</Text>
        </View>
      )}
    </View>
  );
};

export default DataLoadingScreen;

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com