React Native 加载栏 - TypeScript

简介

React Native 加载栏是一种常见的用户体验元素，它可以告诉用户当前应用正在加载或处理某些事情。在本文中，我们将介绍如何在 React Native 应用中使用加载栏，并使用 TypeScript 来确保代码的类型安全。

实现

首先，我们需要安装依赖：

npm install @react-native-community/progress-view react-native-svg

然后，我们可以创建一个自定义组件来渲染加载栏。

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { ProgressCircle } from 'react-native-svg';
import ProgressView from '@react-native-community/progress-view';

interface Props {
  visible: boolean;
  progress?: number;
}

const LoadingIndicator: React.FC<Props> = ({ visible, progress }) => {
  if (!visible) {
    return null;
  }

  return (
    <View style={styles.container}>
      {progress !== undefined ? (
        <ProgressCircle
          style={styles.progress}
          progress={progress}
          strokeWidth={5}
          backgroundColor="#f2f2f2"
        />
      ) : (
        <ProgressView style={styles.progress} progress={0.5} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1,
  },
  progress: {
    width: 50,
    height: 50,
  },
});

export default LoadingIndicator;

在这个组件中，我们使用了 @react-native-community/progress-view 来渲染 iOS 平台的加载栏，使用了 react-native-svg 来渲染圆形的加载栏，并使用了 props 来控制加载栏的显示和进度。

最后，我们可以在需要显示加载栏的位置使用该组件。

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import LoadingIndicator from './LoadingIndicator';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState<number>();

  useEffect(() => {
    if (loading) {
      let progress = 0;
      const timer = setInterval(() => {
        if (progress < 1) {
          progress += 0.1;
          setProgress(progress);
        } else {
          setLoading(false);
          clearInterval(timer);
        }
      }, 200);
    }
  }, [loading]);

  const handlePress = () => {
    setLoading(true);
    setProgress(undefined);
  };

  return (
    <View>
      <Text>React Native 加载栏示例</Text>
      <Button title="显示加载栏" onPress={handlePress} />
      <LoadingIndicator visible={loading} progress={progress} />
    </View>
  );
};

export default App;

在这个示例应用中，我们使用了 useState 来控制是否显示加载栏，使用了 useEffect 和 setInterval 来模拟加载进度，并使用了 props 来传递加载栏的显示状态和进度。

总结

React Native 加载栏是一种常见的用户体验元素，可以告诉用户当前应用正在加载或处理某些事情。我们可以使用 @react-native-community/progress-view 和 react-native-svg 来渲染加载栏，并使用 TypeScript 来确保代码的类型安全。在使用加载栏时，我们可以通过 useState 和 useEffect 来控制加载状态和进度，通过 props 来传递加载栏的显示状态和进度。