在React Native中构建一个动画加载器

React Native是一个了不起的库，适用于希望快速构建移动应用的开发者。它提供了一种向前端显示信息的有效方式。但在显示API数据之前，应用程序必须首先告知用户数据正在路上。

这样做的一个方法是利用动画的力量。因此，它也可以给你的UI带来更生动的感觉。

例如，你认为什么能给人更好的印象？渲染一段文字。

还是使用一个生动的动画。

在React Native的世界里，存在大量的库来帮助你启动和运行。在本指南中，我们将使用lottie-react-native和react-native-animatable。这是因为它们使用起来绝对轻而易举，而且维护良好。

使用Lottie

假设你用Adobe After Effects构建了一个令人叹为观止的图形，并想在你的应用程序中渲染它。但是，这有一个重大缺陷：Adobe不允许你这样做。

这就是lottie-react-native出现的地方。它允许开发者渲染他们的动画，而不需要通过代码重新创建它们。它只需要几行代码就可以工作，从而让你专注于项目中更重要的部分。

安装模块

要在你的应用程序中安装它，请运行以下终端命令。

npm i lottie-react-native
npm i lottie-ios@3.1.8

获取资产

你可以通过Bodymovin插件导出你自己的动画来使用它们。但在本指南中，我们将使用LottieFiles目录。它包括大量的免费动画，你可以在你的项目中导入。

在这篇文章中，我将使用睡猫动画。

要在你的应用程序中使用你想要的动画，首先以JSON格式下载它，像这样。

接下来，将其移到assets 文件夹中。

简单的用法

要使用Lottie，请编写以下代码。

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import LottieView from "lottie-react-native";
import { useState } from "react";
export default function SimpleLottie() {
  return (
    <View>
      <LottieView
        source={require("./assets/67834-ssssttt-shut-up-the-cat-is-sleeping.json")}
        style={styles.animation}
        autoPlay
      />
    </View>
  );
}
const styles = StyleSheet.create({
  animation: {
    width: 100,
    height: 100,
  },
});

LottieView 组件持有我们的动画配置。在这里，source 道具告诉我们资产的位置。此外，autoPlay 道具告诉Lottie在启动时运行该动画。

为了渲染SimpleLottie ，在App.js ，写下以下代码。

//further code removed..
import SimpleLottie from "./SimpleLottie";
export default function App() {
  return (
    <View style={styles.container}>
      <SimpleLottie />
      <StatusBar style="auto" />
    </View>
  );
}
//...

Lottie中的条件性渲染

我们甚至可以对我们的SimpleLottie 组件进行有条件渲染。这将模拟加载功能。

const [show, setShow] = useState(false);

useEffect(() => {
  setTimeout(() => setShow(true), 3000);
}, []);

return (
  <View style={styles.container}>
    {show ?<Text>Finished loading!</Text> : <SimpleLottie /> }
    <StatusBar style="auto" />
  </View>
);

在这段代码中，我们告诉React在3秒后扭转show Hook的值。这将在屏幕上渲染Text 。

用Lottie创建一个加载器组件

这里，我们的计划是显示来自Coffee API的数据。当数据正在加载时，React将显示加载图形。
创建一个名为DataDisplay.js 的文件。这个组件将在显示列表项时发挥作用。在这里，写下以下代码。

import React from "react";
import { StyleSheet, SafeAreaView, FlatList, Text, View } from "react-native";
export default function DataDisplay({ data }) {
  const Item = ({ title }) => (
    <View style={styles.item}>
      <Text>{title}</Text>
    </View>
  );
  const renderItem = ({ item }) => <Item title={item.title} />;
  return (
    <SafeAreaView>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
      />
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  item: {
    backgroundColor: "yellow",
    padding: 20,
    marginVertical: 8,
  },
});

从这段代码中可以得出一些推论。

• 我们创建了Item 组件和renderItem 函数。它们将一起工作来渲染数组中的每个单独的元素
• 后来，我们使用FlatList 组件来渲染列表

接下来，像这样修改你的App.js 文件。

export default function App() {
  const [data, setData] = useState(null);
  const fetchData = async () => {
    const resp = await fetch("https://api.sampleapis.com/coffee/hot");
    const data = await resp.json();
    setData(data);
  };
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <View style={styles.container}>
      {data ? <DataDisplay data={data} /> : <SimpleLottie />}
      <StatusBar style="auto" />
    </View>
  );
}

在上面的代码块中，我们告诉React从API中获取数据并将响应存储到data Hook中。之后，React检查响应是否已经加载（data 有一个值）。

如果true ，则显示API数据。否则，React Native会渲染SimpleLottie 动画。

这将是输出。

使用 react-native-animatable

react-native-animatable库允许开发者通过声明式API创建自己的过渡和动画。这适用于加载器和闪屏。

安装

运行下面的终端命令来获得该包。

npm install react-native-animatable 

简单的用法

创建一个名为SimpleAnimatable.js 的文件。在这里，写下以下代码块。

import * as Animatable from "react-native-animatable";
import React from "react";

export default function SimpleAnimatable() {
  return (
    <Animatable.View>
      <Animatable.Text
        animation="bounce"
        iterationCount={"infinite"}
        direction="normal"
      >
        Loading..
      </Animatable.Text>
    </Animatable.View>
  );
}

让我们一块一块地剖析这段代码。

• Animatable.View 组件允许我们的自定义组件具有动画功能
• 我们的Text 元素将有类似弹跳的行为。此外，我们还将iterationCount 属性设置为infinite 。这使得动画永远循环。

这将是输出。

你甚至可以像这样得到一个 "类似闪光 "的动画。

<Animatable.Text
   animation="flash"
//....

用 react-native-animatable 创建一个加载器组件

这一步应该是很简单的。你可以简单地使用条件渲染。

{data ? <DataDisplay data={data} /> : <SimpleAnimatable />}

结论

在这篇文章中，我们介绍了在React Native中构建动画的两种常见策略。在我自己的项目中，我使用Lottie，因为它坚如磐石，非常容易使用。

此外，Lottie包括一个强制性的API，可以对所选择的动画进行更精细的控制。

非常感谢您的阅读!

The postBuilding an animated loader in React Nativeappeared first onLogRocket Blog.