标签: flatlist

（注意：我正在为这个应用程序使用 Expo）

我正在尝试渲染一个FlatList显示打印机列表的文件。这是代码：

<FlatList
  data={printers}
  keyExtractor={printer => printer.id}
  renderItem={({ item }) => {
    return (
      <Printer
        printerTitle={item.name}
        selected={item.selected}
        last={item === last(printers)}
      />
    );
  }}
/>

这是<Printer />组件的代码：

const Printer = props => {
  const { last, printerTitle, selected } = props;
  return (
    <View style={[styles.container, last ? styles.lastContainer : null]}>
      <View style={styles.innerContainer}>
        <View style={styles.leftContainter}>
          {selected ? (
            <Image source={selected ? Images.checkedCircle : null} />
          ) : null}
        </View>
        <View style={styles.printerDetails}>
          <Text style={styles.printerTitle}>{printerTitle}</Text>
        </View>
      </View>
    </View>
  ); …

我正在构建一个 React Native 应用程序，但在使用 FlatList 时遇到了问题。我认为问题可能出在我尝试实现此操作的方式上，因此我使用了https://reactnative.dev/docs/flatlist中的示例代码并尝试自行运行它。

无论我如何尝试，我都会收到错误：

undefined 不是一个对象（评估 'props.getItem'）

这是从 FlatList.js 第 450 行生成的。

该文件的第 449 行和 450 行是：

_checkProps(props: Props<ItemT>) {
   const {

这是来自与 React Native 捆绑在一起的 FlatList.js。

我使用的是 React Native 0.65.1。

这是我尝试运行的代码，它给了我错误：

import React from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item …

我正在构建一个聊天应用程序，从React-Native版本开始0.63，当Android上的倒置 Flatlist 中涉及长文本时，我的性能很差。

这是展示该问题的小吃再现（仅在尝试使用物理 Android 手机时可见）。

我为它报告了一个错误。对于正在使用倒置 Flatlist 构建聊天应用程序的任何人来说，这应该是相当公然的，但不知何故，我没有看到任何地方都在谈论这个问题。

这让我觉得也许其他人已经以某种方式解决了它？如果是，我该如何解决？它使我的应用程序现在几乎无法使用。

是否可以使用 React Native Web实现 Flatlist，在其中预先添加数据，同时保持可见内容？

现在，当您添加某些内容时，它会跳到 Flatlist 的顶部。我使用onContentSizeChange在更新后强制移动滚动位置，但体验很糟糕，因为有时更新前会有很大的延迟。检查这个松弛看看我的意思：https : //snack.expo.io/@divone/prepend-data-to-flatlist-on-web

有没有人成功地使用 React Native Web 实现类似 Chat 的 Flatlist？如果是，如何实现？

编辑：我发现在 react native web 上，当您预先添加数据IF AND ONLY IF滚动条不在屏幕顶部时，内容可见性会自动保持。（点心）

所以我的问题仍然存在......即使滚动条一直向上滚动，如何预先添加数据并保持可见性？

我有一个清单。里面有10个元素。我用平面列表来展示这个。但是，当列表中 10 个元素中的 1 个发生更改时，它会再次渲染其中的 10 个。我本来打算用备忘录来解决这个问题（但无论如何，flatlist 必须自己完成此操作），但我收到了语法错误。错误：renderItem 不起作用。

const Item = React.memo( ({item}) => (
   <Text>{item.name}</Text>
))

const List = () => {
  return (
     <FlatList
        ..
        renderItem = {Item}
     >
)}
export default React.memo(List);

我现在有一个包含一堆项目的平面列表，当我按下按钮时，平面列表使用 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={{ …

我正在尝试使用 onLayout 获取高度，但 getItemLayout 首先运行 onLoad 并写入此错误 [Unhandled Promise Rejection: Invariant Violation: [5063,"RCTView",911,{"height":"<>"}] 是不能用作本机方法参数]

如何在 getItemLayout 运行之前获取高度？

const [size, setSize] = useState([]);

 const renderItemFinal = useCallback(({ item, index }) => {
    return (
      <View
        style={{ flex: 1 }}>
        <Post
          postAtivo={false}
          onViewRef={itemState?.item?.post_id == item?.post_id && itemState?.isViewable && ready ? true : false}
          user={item.user}
          page={item.page}
          item={item}
        />
      </View>
    )
  }, [itemState])
    
    
    
    const getItemLayout = (data, index) => {
        const length = size[index];
        const offset = size.slice(0, index).reduce((a, c) => a + c, …

我正在开发一个反应本机应用程序，

在这个应用程序中，我有一个捕获视图的图像，如果用户捕获图像，它将存储在状态挂钩中，如果存储了某些内容，它将显示在 Flatlist 中。

如果我们认为用户需要从列表中删除某个项目，那么我提供了一个删除按钮。当用户单击它时，应该从状态中删除该项目并更新 Flatlist。

我的问题是：从状态中删除项目后，我的视图不会重新渲染。我可以保证数据已成功从状态中删除，但我的 Flatlist 没有更新。

我的代码如下，请大家帮我解答一下。提前致谢。

下面的代码用于从状态中删除该项目。

const [selectedFiles, setSelectedFiles] = useState([]);

const removeItemFromArray = (index: number) => {
     let imagesArray = selectedFiles;
     imagesArray.splice(index, 1);
     setSelectedFiles(imagesArray);
}

平面列表

<FlatList
 showsHorizontalScrollIndicator={false}
                    data={selectedFiles}
                    renderItem={({ item, index }) => {
                        return (
                            <ImagePreviewSlider
                                itemData={item}
                                viewImage={() => viewImage(index)}
                                deleteItem={() => removeItemFromArray(index)}
                            />
                        );
                    }}
                />

----------完整代码--------------

照片上传.tsx

import React, { useState } from "react";
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Image,
    ImageBackground,
    TouchableOpacity,
    Modal,
    FlatList
} from "react-native";
import ImagePicker …

我正在 Android 模拟器中运行代码。在 iOS 上不会出现此问题。如果您尝试点击 FlatList 底部的 TextInput，键盘会立即关闭，可能是因为输入打开后位于键盘下方。任何线索将不胜感激

从“反应”导入反应；从 'react-native' 导入 { TextInput, FlatList };

导出默认类 App 扩展 React.Component { render() { return (

    <FlatList

        data={["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t"]}
        keyExtractor={item => item}
        renderItem={({item}) => (
            <TextInput [placeholder="0.0"][1]


            />
        )}
    />  
    );
}

}

我在拉动刷新功能时遇到问题。FlatList 渲染良好，但拉动刷新不起作用。这是我当前的源代码：

return (
   <View style={GlobalStyles.flex1}>
       <FlatList
           showsVerticalScrollIndicator={false}
           refreshControl={
               <RefreshControl
                   refreshing={isRefreshing}
                   onRefresh={() => {
                       console.log("onRefresh loadVocable");
                       loadVocables();
                   }}
               />
           }
           data={vocables}
           keyExtractor={vocable => vocable.id}
           onEndReached={() => {
               if (!isRefreshing && !endReached) {
                   loadVocables();
               }
           }}
           renderItem={vocable => (
               <TouchableOpacity
                   onPress={() => {
                       props.navigation.navigate({ routeName: "editVocable", params: { vocable: vocable.item } });
                   }}
                   onLongPress={() => {
                       handleLongPress(vocable.item.id);
                   }}>
                   <Card style={styles.cardStyle}>
                       <View style={styles.part1}>
                           <Text style={styles.vocableText}>{vocable.item.wordENG}</Text>
                           <Text style={styles.vocableText}>{vocable.item.wordDE}</Text>
                       </View>
                       <View style={styles.part2}>
                           <Ionicons name={vocable.item.known ? "md-checkmark-circle" : "md-close-circle"} size={23} color={vocable.item.known ? Colors.success : Colors.danger} …

我在尝试使用 100% 高度的 Flex 显示视图列表时遇到问题，当它从平面列表渲染列表时出现问题，我可能会用 Flex 做一些错误的事情。

这就是我想要的：滚动时具有相同高度的平面列表我将转到另一个组件

这就是我所拥有的所有渲染视图的粉碎列表

flatList 就是这样：

  <FlatList
      pagingEnabled={true}
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />

我正在渲染的视图中的容器看起来像这样（css）

 container: {
    alignItems: 'center',
    // TODO: check how why the screen is forguetting the tab, thats why I put the height like that
    width: '100%',
    height: '100%',
    justifyContent: 'space-around',
    flex: 1,
  },