React Native Loading Placeholder 使用教程

React Native Loading Placeholder 使用教程

react-native-loading-placeholderReact Native Loading Placeholder项目地址:https://gitcode.com/gh_mirrors/re/react-native-loading-placeholder

项目介绍

React Native Loading Placeholder 是一个高度可定制的加载占位符组件，它为 React Native 应用提供了一种优雅的方式来展示加载状态，直到真实内容准备就绪。通过这个组件，开发者可以轻松创建既美观又具反馈感的加载动画，极大地提升了应用的专业性和用户体验。

项目快速启动

安装

首先，你需要通过 npm 安装 react-native-loading-placeholder：

npm install react-native-loading-placeholder

基本使用

以下是一个简单的示例，展示如何在 React Native 项目中使用 react-native-loading-placeholder：

import React from 'react';
import { View, Text } from 'react-native';
import Placeholder from 'react-native-loading-placeholder';

const App = () => {
  return (
    <View>
      <Placeholder
        style={{ height: 200, margin: 10 }}
        duration={1000}
        color="#E1E9EE"
      />
      <Text>加载中...</Text>
    </View>
  );
};

export default App;

应用案例和最佳实践

列表加载

在加载新闻或商品列表时，可以使用 react-native-loading-placeholder 来展示占位符动画，提高用户体验：

import React, { useState, useEffect } from 'react';
import { View, FlatList } from 'react-native';
import Placeholder from 'react-native-loading-placeholder';

const NewsList = () => {
  const [loading, setLoading] = useState(true);
  const [news, setNews] = useState([]);

  useEffect(() => {
    // 模拟数据加载
    setTimeout(() => {
      setNews([
        { id: '1', title: '新闻1' },
        { id: '2', title: '新闻2' },
      ]);
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <FlatList
      data={loading ? Array(5).fill({}) : news}
      renderItem={({ item }) => (
        <View style={{ height: 100, margin: 10 }}>
          {loading ? (
            <Placeholder
              style={{ height: 100 }}
              duration={1000}
              color="#E1E9EE"
            />
          ) : (
            <Text>{item.title}</Text>
          )}
        </View>
      )}
      keyExtractor={(item) => item.id}
    />
  );
};

export default NewsList;

详情页面加载

在从列表跳转到详情页面时，可以使用占位符动画来过渡：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import Placeholder from 'react-native-loading-placeholder';

const NewsDetail = ({ route }) => {
  const [loading, setLoading] = useState(true);
  const [detail, setDetail] = useState({});

  useEffect(() => {
    // 模拟数据加载
    setTimeout(() => {
      setDetail({ title: '新闻详情', content: '这是新闻的详细内容' });
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <View>
      {loading ? (
        <Placeholder
          style={{ height: 200, margin: 10 }}
          duration={1000}
          color="#E1E9EE"
        />
      ) : (
        <View>
          <Text>{detail.title}</Text>
          <Text>{detail.content}</Text>
        </View>
      )}
    </View>
  );
};

export default NewsDetail;

典型生态项目

React Native Navigation

React Native Navigation 是一个完整的 React Native 原生导航解决方案，与 react-native-loading-placeholder 结合使用，可以进一步提升应用的用户体验。

React Native Shimmer Placeholder

React Native Shimmer Placeholder 是另一个优秀的占位符组件，它提供了类似

react-native-loading-placeholderReact Native Loading Placeholder项目地址:https://gitcode.com/gh_mirrors/re/react-native-loading-placeholder