标签: react-native-flatlist

我有一些看起来像这样的用户界面：

这些列表项可以：(1) 添加、(2) 删除、(3) 重新排序。

重新排序不是拖放，而是在单击选中/空圆圈图标时发生 - 选中的项目始终保留在列表的顶部。

在 React Native 中，有很多从列表中添加/删除项目的动画示例（这里是一个这样的示例）。

但是我怎样才能动画化列表的排序呢？具体来说，就我而言，这将是两个列表项交换位置。

我已经看过react-native-sortable-list和其他一些开源项目，但我认为这可能有点矫枉过正，因为我不需要拖放。另外，我已经连接了一些 FlatList 事件，例如onLayout、onContentSizeChange和onScroll，因此我更喜欢一个允许我直接为 FlatList 的子项设置动画的解决方案。

我正在尝试做这样的事情：

问题：该项目是根据 React Native Docsimmutablejs构建的，我无法使用，因此我无法使用该组件的 numColumns props 功能。AFAIK，我唯一的选择是使用 VirtualizedList，正如文档指出的那样，但我不知道如何将单元格显示为网格，如上所示。FlatList

我已经尝试style在单元格和视图包装器中添加道具，但没有任何用于对齐单元格的代码（如我发布的图片）被忽略。事实上，当我使用 时，它表现得很完美ScrollView，但由于巨大的滞后，我将代码移至VirtualizedList.

有什么帮助吗？任何事情都会受到欢迎，我已经在谷歌上挖掘了很多，但我找不到任何关于此的信息。

一些示例代码：

      <View>
        <VirtualizedList
          data={props.schedules}
          getItem={(data, index) => data.get(index)}
          getItemCount={(data) => data.size}
          keyExtractor={(item, index) => index.toString()}
          CellRendererComponent={({children, item}) => {
            return (
              <View style={{any flexbox code gets ignored here}}>
                {children}
              </View>
            )}}
          renderItem={({ item, index }) => (
            <Text style={{also here}} key={index}>{item.get('schedule')}</Text>
          )}
        />
      </View>

是否可以将 FlatList 的背景颜色设置为透明？

我有应用程序背景图像并想将其用作屏幕背景。

但是FlatList中的ListItem似乎需要设置一些颜色。同样的问题也适用于标题。

    <FlatList
      style={styles.root}
      data={contacts}
      getItemLayout={this.getItemLayout}
      ItemSeparatorComponent={this.renderSeparator}
      keyExtractor={this.extractItemKey}
      renderItem={this.renderItem}
      enableEmptySections />

renderItem = ({ item }) => {
        return (
        <TouchableOpacity onPress={this.onPress}>
          <View style={styles.container}>
            <Avatar type='circle' style={styles.avatar} img={this.getAvatar(image, gender)} />
           <View style={{flexDirection: 'column'}}>
             <Text style={styles.text}>{`${lastName} ${firstName}`}</Text>
             <Text style={styles.phone}>{`${mobilePhone}`}</Text>
           </View>
          </View>
         </TouchableOpacity>
        );
    }

像这里的东西：

我不明白为什么我的 FlatList 底部包含这样的空格： 那就是空格

谁能帮我删除空格？我尝试了很多方法，但没有一个有效。我也尝试过使用ScrollView，但出现了同样的问题。这是我的源代码：

  <View
    style={{
      flex: 1,
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <FlatList
      data={eventCategories}
      initialNumToRender={5}
      keyExtractor={item => item.id_event_category}
      showsHorizontalScrollIndicator={false}
      horizontal
      renderItem={renderCategories}
    />
    <View>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
    </View>
    <View style={styles.button}>
      <SmallButton
        title="Urutkan"
        icon="sort-active"
        onPress={() => setVisibleSort(true)}
      />
    </View>
  </View>

作为一个

{
   selected.length == 2 
   ?
   <FlatList
   keyExtractor={item => "_" + item.id}
   renderItem={this.renderLastItem}
   data={subGroups}
   numColumns={1} /> 
   :
   <FlatList
   keyExtractor={item => "#" + item.id}
   renderItem={this.renderItem}
   data={subGroups}
   numColumns={2} />
}

在上面的代码行中，当selected.length等于 2 时，出现以下错误：

Invariant Violation: Changing numColumns on the fly is not supported. 

这是两个不同的列表，我不会更改 numColumns。在我看来，react native 试图在所有条件下都使用相同的 FlatList 对象。我该如何解决这个问题？

感谢您阅读我的问题！几天以来我一直在努力解决这个问题：每次我对底层数据进行更改时，我的 Flatlist 组件都会重新呈现列表中的所有项目。

情况：

• 我有一个渲染项目的 FlatList 组件，其中包含一个 TouchableOpacity 对象来切换该项目的收藏夹状态。
• 如果按下此按钮，我希望只有这个特定项目在我的 FlatList 中更改/重新渲染，而不是所有项目。感觉就像我一通过调用 setListData 更新状态，它就会重新渲染所有内容。
• 我在更复杂的设置中遇到了这个问题，但能够深入探讨这个核心问题。或者这实际上是预期的行为？

代码：

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from "react-native";

const PlanerScreen = () => {
  const [listData, setListData] = useState([
    { id: "1", name: "Banana", isFav: true },
    { id: "2", name: "Apple", isFav: false },
  ]);

  const Item = ({ item, onPressHandler }) => {
    console.log(item.name, " rendered");
    const color = item.isFav ? "red" : …

我刚刚开始学习 React Native，这是我的第一个项目 - 新闻应用程序。不过，我已经使用 React Native Flatlist 成功渲染了新闻的图像和描述。

但是当我使用numColumns制作两列时，列号保持不变。但显示的图像数量变成了一半（即在我的例子中从 18 到 9）。而且图像的描述位于下一条新闻的图像下方，如下所示 -

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0

我的源代码如下所示 -

import React, { Component } from \'react\'\nimport { View, Text, FlatList, TouchableHighlight, SectionList, TouchableOpacity , Image,StyleSheet } from \'react-native\'\nimport { ScrollView } from \'react-native-gesture-handler\';\nimport { HomeNewsJSON } from "../../../../assects/JSON/Home"\n\nclass HomeNews extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      news: ""\n    };\n  }\n\n  componentDidMount() {\n    this.getInfo();\n  }\n\n  getInfo() {\n    var data = []\n    var jsondata = HomeNewsJSON["items"]\n …

在过去的几天里，我一直在努力解决这个问题：我有一个创建者列表存储在一个数组中，还有另一个用于关注创建者的数组，但是当用户“关注”创建者时，整个 FlatList 会重新渲染。这是一个问题，因为我为每个创建者加载 3 个图像，因此每次用户关注/取消关注创建者时都会出现大量闪烁和滞后。

我尝试过使用 React.memo 但它似乎不起作用，而且我觉得我的代码的其他部分也可能存在问题。任何帮助将不胜感激！

获取第一次渲染的数据：

  useMemo(() => {
    setRefreshing(true);
    return onValue(ref(db, '/users/' + auth?.currentUser?.uid + '/vendorsFollowing'), async (querySnapShot) => {
      let data = (await querySnapShot.val()) || {};
      let vendorData = { ...data };
      setVendorsFollowing(Object.keys(vendorData))
      setRefreshing(false);
    });
  }, []);

  useMemo(() => {
    setRefreshing(true);
    return onValue(ref(db, '/users'), (querySnapShot) => {
      let data = querySnapShot.val() || {};
      let vendorList = { ...data };
      setVendorArray(vendorList);
      setFilteredVendorArray(vendorList);
      setRefreshing(false);
    });
  }, []);

供应商项目：

const VendorItem = React.memo(({ vendor }: any) => { …

我想让我的水平FlatList(启用分页)向左或向右滚动,内容始终位于屏幕中央,下一个和前一个内容仍然显示.

像这样的东西(用于横向动作)

但不幸的是,当平面列表滚动时,滚动的长度与平面列表或其父级的宽度相同,我不能达到我想要的效果.

如何在React Native Flatlist中列出2列,例如: