标签: react-native-flatlist

我在反应本机中有一个平面列表，我试图在拉下它时重新获取数据（本机刷新功能）。当我这样做时，我收到此错误：

类型错误：未定义不是对象

我不知道出了什么问题。我在用

• 世博 SDK 38
• "@apollo/client": "^3.1.3",
• "graphql": "^15.3.0",

这是我的代码：

export default function DiscoverFeed({ navigation }) {
  const theme = useTheme();

  const { data, error, loading, refetch, fetchMore, networkStatus } = useQuery(
    GET_RECIPE_FEED,
    {
      variables: { offset: 0 },
      notifyOnNetworkStatusChange: true,
    }
  );

  if (error) return <Text>There was an error, try and reload.</Text>;
  if (loading) return <Loader />;
  if (networkStatus === NetworkStatus.refetch) return <Loader />;

  const renderItem = ({ item }) => {
    return (
      <View style={styles.cardItems}>
        <RecipeCard item={item} …

我需要设置状态来检测当前视口中的哪个项目可见。为此，我编写以下代码：

const [inViewPort, setInViewPort] = useState(0);

const viewabilityConfig = {
  viewAreaCoveragePercentThreshold: 30,
};

const onViewableItemsChanged = ({viewableItems, changed}) => {
  if (changed && changed.length > 0) {
    setInViewPort(changed[0].index);
  }
};

return (
  <SafeAreaView style={styles.container}>
    <FlatList
      data={myData}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(_, index) => index.toString()}
      horizontal={true}
      onViewableItemsChanged={onViewableItemsChanged}
      viewabilityConfig={viewabilityConfig}
    />
  </SafeAreaView>
);

onViewableItemsChanged 事件回调正确触发，但在我调用 setInViewPort 后，组件更新并重新呈现以下错误：

违反不变性：不支持动态更改 onViewableItemsChanged

这是正在发生的事情：

-我正在 RN 中开发一个博客应用程序。每个用户都有一个个人资料页面，其中可以看到用户撰写的所有帖子。

-每个帖子都有一个缩略图，我按照我应该的方式在 FlatList 中渲染帖子。

-但是，如果列表足够大，例如 100+，则对于 iOS 和 Android，帖子中的图像在向上/向下滚动时会闪烁。这是可以理解的，这是一种糟糕的用户体验。

-有趣的是，如果列表相当小，图像根本不会闪烁。如果这是语法问题，所有图像都会闪烁。

- 使用 FlatList 时是否会出现这种行为？即在渲染大量项目时会出现问题吗？如果是这样，我该怎么做才能防止闪烁？

仅供参考，下面是我用于 FlatList 组件的代码。足够简单：

     const PostArray = (props) => {
         return (
             (props.postarray===null ?
             null  :
             <FlatList
                 data={props.postarray}
                 style={{marginTop:10}}
                 renderItem={({ item }) =>
                 <ProfilePostsPreview item={item}/>
             }
             keyExtractor={(item, index) => index.toString()}
             />
             )
         )
     }

有什么建议吗？提前致谢！

我现在有一个包含一堆项目的平面列表，当我按下按钮时，平面列表使用 ref 和scrollToIndex 方法向下滚动。但滚动动画比我需要的要快，是否有办法增加滚动动画持续时间？

这是向上滚动（向上滑动手势）功能的代码

const scrollUp = () => {
    console.log("Up Gesture", currentIndex);
    if (currentIndex <= DATA.length - 1) {
        if (currentIndex != DATA.length - 1) {
            flatlistRef.current.scrollToIndex({
                index: currentIndex + 1,
                animated: true,
                viewOffset: 200,

            });
            setCurrentIndex(currentIndex + 1);
        }

    }
}

这是jsx返回的

return (
    <>
        <StatusBar hidden={true} />
        <Button title="click me" style={{ position: 'absolute', zIndex: 20, top: 20, }} onPress={() => scrollUp()} />
        <AnimatedFlatList
            {...{ onScroll, ListFooterComponent, ListHeaderComponent, onScrollEndDrag }}
            ref={flatlistRef}
            overScrollMode='never'
            // scrollEnabled={false}
            scrollEventThrottle={1}
            data={DATA}
            style={{ …

我有一个平面列表。

我想在项目之间添加逗号。

目前工作是这样的；

如果只有一项； Mon,

如果有多个项目； Mon, Tue, Wed,

我的代码；

<FlatList
  data={job.schedule}
  renderItem={({ item, index }) => (
    <View style={[[Layout.center], {}]}>
      <Text style={[[Fonts.textInterRegular12]]}>
        {item.dayHuman.slice(0, 3)}{', '}
      </Text>
    </View>
  )}
  horizontal
  keyExtractor={item => item.id}
  extraData={this.state}
  showsVerticalScrollIndicator={false}
/>

上面的代码有两个问题。

如果只有一项，我不想添加逗号。例如Mon

如果有多个项目，我不想在最后一个项目旁边添加逗号。例如Mon, Tue, Wed

我怎样才能实现这个目标？

我创建了一张自定义动画底部表。用户可以上下移动底部滚动条。在我的底部工作表中，我使用了 flatList 来获取数据并将项目呈现为卡片。到目前为止，一切都按预期工作，但我遇到了平面列表滚动问题。在底部工作表内，平面列表不会滚动。我已经制作了硬编码的 height value 2000px，这确实是一种实践，而且 FlatListcontentContainerStyle添加了硬编码的 paddingBottom 2000（也是另一个不好的实践）。我想滚动基于Flex-box. 我不知道如何解决这个问题。

我在expo-snacks上分享我的代码

这是我的全部代码

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  useWindowDimensions,
  SafeAreaView,
  RefreshControl,
  Animated,
  Button,
  FlatList,
} from "react-native";

import MapView from "react-native-maps";
import styled from "styled-components";

import {
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
  TouchableOpacity,
} from "react-native-gesture-handler";

const { width } = Dimensions.get("screen");

const initialRegion = {
  latitudeDelta: 15,
  longitudeDelta: 15,
  latitude: 60.1098678,
  longitude: 24.7385084,
};

const api = …

我与 styled-components 、 FlatList 和 typescript 进行了一场历史性的持续战斗......到目前为止，我已经能够使其与以下内容一起工作：

const StyledList = styled(FlatList as new () => FlatList<ItemType>)<CustomProps>(props => ({
  .......
}));

这种方法工作得很好，直到我最近进行了一次项目升级，它打破了这种方法。我现在有以下依赖版本：

"typescript": "~4.3.5"

"styled-components": "^5.3.3"

"react-native": "0.64.3"

错误是这样的：

Property 'data' does not exist on type 'IntrinsicAttributes & { ref?: Ref<FlatList< ItemType >> | undefined; key?: Key | null | undefined; } & { theme?: DefaultTheme | undefined; } & { ...; } & { ...; }'.

有人可以提供对此的任何见解吗？最新版本中可能发生了哪些更改styled-components或react-native阻止了原始解决方法的工作？