标签: react-native-flatlist

我正在使用 Typescript 制作 React Native 应用程序，但 Flatlist renderItem 出现错误。我是 Typescript 和 React Native 的新手。错误说：

没有重载与此调用匹配。重载第 1 个（共 2 个）“(props: FlatListProps | Readonly<FlatListProps>): FlatList<...>”出现以下错误。类型“({ item }: { item: arrayPlasticsData; }) => void”不可分配给类型“ListRenderItem”。类型“void”不可分配给类型“ReactElement<any, string |” JSXElement构造函数> | 无效的'。重载 2 个（共 2 个）“(props: FlatListProps, context: any): FlatList”，出现以下错误。类型“({ item }: { item: arrayPlasticsData; }) => void”不可分配给类型“ListRenderItem”。

我正在尝试渲染一个包含项目列表的 Flatlist，但它基本上不允许我在那里渲染任何内容。我也尝试在 renderItem 上放置类似 Something 的内容，但它也不起作用。PlasticTypesComponent.ts 带来一个包含数据的数组。这是代码：

import { FlatList, StyleSheet, Text, View } from "react-native";
import PlasticTypesComponent, { arrayPlasticsData } from "../../components/data/PlasticTypes";

import PlasticItemComponent from "../../components/plasticItem/plasticItem";
import …

我有一个平面列表。

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

目前工作是这样的；

如果只有一项； 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阻止了原始解决方法的工作？

我有一个FlatList接收最大值的（不可变）数据。50 个元素，它使用react-native-svg.

部分图形由Pressable用于选择元素的组件包裹。

现在的问题是，我无法选择任何元素，直到遍历FlatList完所有 50 个项目。

我不明白的是，屏幕外的项目甚至没有渲染，它只是容器。全部渲染完毕后，我可以单击元素，显示波纹效果并触发事件。

眼镜：

• 世博会 @ 46.0.0
• 反应本机@0.69.6
• 反应@18.0.0
• 通过 android 运行expo start --no-dev --minify然后在 Expo Go 中打开

再生产：

import React, { useEffect, useState } from 'react'
import { FlatList } from 'react-native'
import { Foo } from '/path/to/Foo'
import { Bar } from '/path/to/Bar'

export const Overview = props => {
  const [data, setData] = useState(null)
  
  // 1. fetching data

  useEffect(() => {
    // load …

我正在使用新FlatList组件,并希望在生命周期方法中使用ScrollToIndex(或ScrollToEnd)componentDidMount.

我有一个让我们说100个项目的数组,我不想开始渲染第一个项目,但在开始时.让我们说第50项.当FlatList一次只显示一个项目时,它正如所期望的那样工作,如下所述:https://github.com/facebook/react-native/issues/13202

componentDidMount() {
  let wait = new Promise((resolve) => setTimeout(resolve, 500));  // Smaller number should work
  wait.then( () => {
    this.refs.flatlist.scrollToIndex({index: 4, animated: true});
  });
}

这个片段在调用几毫秒后scrollToIndex运行.componentDidMount

但是当我使用FlatList视图包含3x3网格的地方时,我根本无法使其运行.当我使用scrollToIndex并且索引在指定的道具之外时initialNumToRender,我只得到一个scrollIndex out of range $ID我无法理解的错误.提供的数据数组具有所有例如100个项目.当我创造scrollToEnd它时,它只停留在两者之间而不是最后.对我来说,它看起来像某种bug,我不知道如何在初始渲染后滚动到$ X项目.你能帮助我吗？

我很感激任何形式的帮助或评论.

我在iOS和Android(模拟器和设备)上尝试了React-Native v0.43.0和v0.44.0,它总是一样的.

我正在与建立一个聊天框Flatlist。我想向数据添加一个新项目，然后滚动到列表底部。我使用scrollToEnd方法，但是没有用。我怎样才能做到这一点？

<FlatList
        ref="flatList"
        data={this.state.data}
        extraData = {this.state}
        renderItem={({item}) => <Text style={styles.chatFlatListItem}>{item.chat}</Text>}
/>

AddChat(_chat){
    var arr = this.state.data;
    arr.push({key: arr.length, chat: _chat});
    var _data = {};
    _data["data"] = arr;
    this.setState(_data);
    this.refs.flatList.scrollToEnd();
 }

在使用ScrollView对固定页脚进行此问题后,我尝试使用FlatList在屏幕上实现固定页脚.我试图通过将平面列表放在视图中来提供答案,但之后没有任何项目被渲染.有没有人知道如何使用平面列表作为组件的另一个主要元素来实现固定页脚？

React中是否有与React Native中的FlatList组件等效的组件？在React Native中构建了一个移动应用程序之后，我现在将其转换为Web应用程序的React。（曾考虑使用react-native-web，但已决定反对使用它，主要是因为我想学习React。）

如果没有等效项，我一直在考虑仅使用map（）通过我构建的Item组件呈现所有项目，这在docs和此SO问题中也得到了证明。

我正在尝试创建一个FlatList周围有一定间距的水平线。我能够paddingLeft在列表上用正确的开头间距，但是paddingRight在列表上似乎没有任何空格（如果我一直滚动到末尾，则最后一项紧靠边框按下）。

这是一个小吃，您可以运行并现场尝试：https : //snack.expo.io/@saadq/aW50cm

这是我的代码：

import * as React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';

const data = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={styles.flatList}
          horizontal
          data={data}
          renderItem={() => (
            <View style={styles.box}>
              <Text>Box</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { …