通过API提取数据后，OnScroll动画停止工作

问题描述

我对React Native很陌生。我正在构建一个用于购买杂货的应用程序。我开始用代码中的本地数组构建应用程序以填充FlatList。 FlatList 嵌套在 Animated.ScrollView 内， Animated.ScrollView 的 onScroll 触发整个动画（说实话，这确实是个小故障，我正在研究中）。这是动画停止工作之前的代码：

import React,{ useEffect,useState } from "react";
import { useNavigation,useRoute } from "@react-navigation/native";
import { useHeaderHeight } from "@react-navigation/stack";
import colors from "../config/colors";
import {
  StyleSheet,View,FlatList,Text,Image,imagebackground,} from "react-native";
import productosApi from "../api/productos";
import Screen from "../components/Screen";
import AppTextInput from "../components/AppTextInput";
import Categorias from "../components/categorias";
import ProductShop from "../components/ProductShop";
import Animated from "react-native-reanimated";
import Street from "../assets/street.jpg";
import Promociones from "../components/promociones";
import LottieView from "lottie-react-native";

const PRODUCTS = [
  {
    id: 1,},{
    id: 2,{
    id: 3,{
    id: 4,{
    id: 5,{
    id: 6,{
    id: 7,{
    id: 8,{
    id: 9,{
    id: 10,{
    id: 11,{
    id: 12,{
    id: 13,{
    id: 14,{
    id: 15,{
    id: 16,{
    id: 17,{
    id: 18,{
    id: 19,{
    id: 20,];
function Shop({ route }) {
  useRoute();
  const navigation = useNavigation();
  const scrollY = new Animated.Value(0);
  const startHeaderHeight = 175 + useHeaderHeight();
  const startSearchCategory = 130 + useHeaderHeight();
  const startFlatListHeight = 270 + useHeaderHeight();

  const headerY = Animated.interpolate(scrollY,{
    inputRange: [0,startHeaderHeight],outputRange: [0,-startHeaderHeight],extrapolate: "clamp",});
  const searchCategoryY = Animated.interpolate(scrollY,startSearchCategory],-startSearchCategory],});
  const flatListY = Animated.interpolate(scrollY,startFlatListHeight],-useHeaderHeight() - 240],});
  // const promocionY = Animated.interpolate(scrollY,{
  //   inputRange: [0,// });
  return (
    <Screen style={styles.container}>
      <Animated.View
        style={{
          flex: 1,position: "absolute",backgroundColor: "white",top: 0,right: 0,elevation: 1000,left: 0,height: 170,transform: [{ translateY: headerY }],}}
      >
        <imagebackground
          style={{ height: "100%",width: "100%",opacity: 0.4 }}
          source={Street}
          resizeMode={"cover"}
        ></imagebackground>
        <LottieView
          style={{
            position: "absolute",right: -3,bottom: -16,width: 200,height: 200,}}
          ref={(animation) => {
            animation = animation;
          }}
          source={require("../assets/lottie/delivery-riding.json")}
          autoplay
          loop
        />

        <View style={styles.containerImageShop}>
          <Image
            style={{ width: "100%",height: "100%" }}
            source={require("../assets/groceriesBag.png")}
          />
        </View>

        <Text style={styles.shopTitle}>{route.params.title}</Text>
        <Text style={styles.shopSubtitle}>Horario de atención</Text>
      </Animated.View>

      <Animated.View
        style={{
          flex: 1,top: 171,height: "100%",transform: [{ translateY: searchCategoryY }],}}
      >
        <AppTextInput
          icon={"shopping-search"}
          placeholder={"Buscar productos o categorias"}
          size={22}
        ></AppTextInput>
        <View style={{ height: 50 }}>
          <Categorias></Categorias>
        </View>
        <Animated.View
          style={{
            height: 120,zIndex: -1,top: 120,}}
        >
          <Promociones></Promociones>
        </Animated.View>
      </Animated.View>
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event([
          {
            nativeEvent: { contentOffset: { y: scrollY } },])}
        style={{
          flex: 1,top: 400,transform: [{ translateY: flatListY }],}}
      >
        <FlatList
          style={{
            margin: 5,paddingHorizontal: 5,}}
          numColumns={2} // set number of columns
          columnWrapperStyle={styles.row} // space them out evenly
          data={PRODUCTS}
          keyExtractor={(producto) => producto.id.toString()}
          renderItem={({ item }) => (
            <ProductShop
              onPress={() => navigation.navigate("Product")}
            ></ProductShop>
          )}
        />
      </Animated.ScrollView>
    </Screen>
  );
}

export default Shop;

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: "center",alignItems: "center",row: {
    flex: 1,justifyContent: "space-around",containerImageShop: {
    height: 100,width: 100,top: 70,left: 20,shopTitle: {
    fontSize: 35,fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",fontWeight: "bold",top: "50%",left: "32%",color: colors.black,textShadowColor: "white",textShadowRadius: 15,textShadowOffset: { width: -1,height: 1 },shopSubtitle: {
    fontSize: 18,color: "black",textdecorationLine: "underline",top: "73%",left: "34%",carrito: {
    position: "absolute",top: "4%",right: "3%",});

我开始使用API获取 FlatList 的数据，但是当我开始使用API时，动画停止了工作。该API正在将100个项目引入 FlatList 。这是使用API的代码：

import React,} from "react-native";
import productosApi from "../api/productos";
import Screen from "../components/Screen";
import AppTextInput from "../components/AppTextInput";
import Categorias from "../components/categorias";
import ProductShop from "../components/ProductShop";
import Animated from "react-native-reanimated";
import Street from "../assets/street.jpg";
import Promociones from "../components/promociones";
import LottieView from "lottie-react-native";

function Shop({ route }) {
  const [productos,setProductos] = useState([]);

  useEffect(() => {
    loadProductos();
  },[]);

  const loadProductos = async () => {
    const response = await productosApi.getProductos();
    setProductos(response.data);
  };

  useRoute();
  const navigation = useNavigation();
  const scrollY = new Animated.Value(0);
  const startHeaderHeight = 175 + useHeaderHeight();
  const startSearchCategory = 130 + useHeaderHeight();
  const startFlatListHeight = 270 + useHeaderHeight();

  const headerY = Animated.interpolate(scrollY,}}
          numColumns={2} // set number of columns
          columnWrapperStyle={styles.row} // space them out evenly
          data={productos.data}
          keyExtractor={(producto) => producto.id.toString()}
          renderItem={({ item }) => (
            <ProductShop
              onPress={() =>
                navigation.navigate("Product",{
                  producto: item.producto,referencia: item.referencia,precio: item.costo_venta,})
              }
              title={item.producto}
              subtitle={item.referencia}
              precio={item.costo_venta}
            ></ProductShop>
          )}
        />
      </Animated.ScrollView>
    </Screen>
  );
}

export default Shop;

const styles = StyleSheet.create({
  container: {
    flex: 1,});

这是动画工作方式的 GIF ：https://giphy.com/gifs/TH5gGzKw6JZp4mDc8x
这是动画停止工作的方式的 GIF ：https://giphy.com/gifs/j3KGq8mDEB7nBykcGC

如果有人知道什么是问题，我将非常感谢您的帮助！谢谢！

P.S。如果有人可以给我一些有关如何修复可折叠动画的提示，我也将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animation animation animation javascript react-native react-native react-native-flatlist react-native-reanimated