标签: react-native-flatlist

有人在 SectionLists 中有更详细的异构渲染示例吗？

<SectionList
  sections={[ // heterogeneous rendering between sections
      {data: [...], key: ..., renderItem: ...},
      {data: [...], key: ..., renderItem: ...},
      {data: [...], key: ..., renderItem: ...},
  ]}
/>

非常感谢帮助！

我试图将 FlatList 放入 Modal 中，但列表只是从我给它的容器中溢出而不是滚动。我尝试过添加 Flex 等，但没有运气让列表保持在界限内。有什么建议么？

Here is the Modal

const modalContainer = {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
  };

  const innerContainer = {
alignItems: 'center',
// flex: 1,
height: 130,
backgroundColor: colors.white.white,
borderRadius: borderRadius.sm,
width: 450,
  };

  render() {
    const styles = styleMaker();

    return (
      <View>
        <Modal visible = {this.props.visible}>
          <View style={styles.overlay} />
          <View style = {styles.modalContainer}>
          <View style = {styles.innerContainer}>
            {this.props.children}
          </View>
          </View>
        </Modal>
      </View>
    );
  }

我有两个数组，一个用于产品，一个用于主管。显然，两者都有非常不同类型的数据。我想创建一个可滚动列表，该列表将使用单个滚动列表显示所有产品，然后是所有主管。这可能与 React Native 的 FlatList 一起使用吗？如果是这样，或者如果不是，我该怎么做？

我目前可以按如下方式呈现单个数据数组：

<FlatList
    data={this.state.products}
    renderItem={this.renderItem}
/>

但是，如何将主管数据附加到此列表的末尾？显然，因为两个数组之间的数据完全不同，我不能简单地合并数组和/或相同的 renderItem 函数。

如何在同一个可滚动列表中一个接一个地显示两种完全不同类型的数据？

我正在尝试创建一个有点像 Twitter 的帖子推文列表的 FlatList，显示设备图库中从相机到照片的选项。

我不知道如何将前 2-3 个元素作为静态元素，然后通过 CameraRoll 或其他东西添加动态元素。

我想到的第一个解决方案是拥有一个数组，其前 2-3 个元素作为包含“相机”、“画廊”等的文本，然后将该数组与动态数组连接起来，并通过 renderItem() 函数处理所有内容显示“静态元素”情况的不同视图。但我希望有更好的方法来做到这一点。这个你能帮我吗。

我正在使用a flatList从json文件渲染项目，我想在按下按钮时滚动到特定索引，我声明了按下按钮的功能，如下所示

goIndex = () => {
    this.flatListRef.scrollToIndex({animated: true,index:5});
};

尽管它没有显示任何错误，但是列表没有移动到指定的索引。

反应本机：0.55.4

FlatList的附加代码。

<View>
    <FlatList   
        getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }}
        ItemSeparatorComponent={ () => <View style={ { width:"100%", height: .7, backgroundColor: 'rgba( 52,52,52,1)' } } /> }
        data={this.state.outverse}
        renderItem={({item,index}) =>
            <View style={styles2.flatview}>
                <Text style={styles2.name}>{++index}  {item} </Text>
            </View>
        }
    />
</View>

有没有什么方法可以将元素数组传递给 FlatList 而不使用包装器，以便我以后stickyHeaderIndices={[1]}可以只使第二个元素具有粘性？

我的意图是将非粘性标题与粘性工具栏一起使用并将它们传递给组件。

如果我尝试将 renderHeader 作为函数传递给 ListHeaderComponent，例如

  renderHeader = () => {
    const { toolbar, header } = this.props;
    const arr = [header(), toolbar()];
    return arr;
  };

我得到一个

Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `VirtualizedList`.

实现该行为的另一种方法是什么（即）有一个列表，其中只有第二个标题变得粘滞？

我尝试的另一种方法是声明一个带有 3 个孩子的滚动视图：

The non-sticky header
The toolbar
The flatlist itself

在stickyHeaderIndices={[1]}ScrollView 上设置时。 …

我希望有一个多个开关列表,基本上为用户创建一个活动列表,然后"选择/检查"他们是否对一个或多个感兴趣.

我的计划是使用一个开关作为Flatlist的renderItem,但是我遇到了两件事情.

1)当它在Flatlist中时,我无法让开关保持切换状态.我曾经让它工作过一段时间,但是从那以后搞砸了.

2)当它工作时,所有开关都会切换到一起.

任何帮助将非常感激!

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View, Switch } from 'react-native';

class InterestsList extends Component {
  constructor() {
    listKeys = [
      {key: 'Basketball'},
      {key: 'Football'},
      {key: 'Baseball'},
      {key: 'Soccer'},
      {key: 'Running'},
      {key: 'Cross Training'},
      {key: 'Gym Workout'},
      {key: 'Swimming'},
    ];

    super();
    this.state = {
       switchValue: false
    }
  }

  toggleSwitch = (value) => {
    this.setState({switchValue: value})
    console.log('Switch is: ' + value)
  }

  listItem = ({item}) => (
    <View style={{flex: 1, …

我有 250 个对象处于状态，我试图在滚动视图中加载每个对象的图像。我正在使用 react-native-lazyload，它适用于大约前 75 张图像，然后滚动开始减慢到停止，几乎每次都在同一位置。

有没有其他方法可以加载这些图像？似乎 Flatlist 比 Scrollview 更好，但我没有可以调用 onEndReach 的函数

我正在尝试使用react-native flatlist 的scrollToIndex 函数。我期望的是字母列表视图。太使用scrollToIndex，我需要设置 flatlist 组件的 getItemLayout 属性。我已经渲染了与父平面列表中的项目具有相同字母的项目，并渲染了子平面列表中的项目，因此父平面列表的项目高度有所不同。问题是，如果我给出 getItemLayout 属性，它会给我如下错误。

不变违规： 不变违规： 不变违规： 不变违规： 当提供测量度量函数时，不必估计帧

<FlatList data={this.cityList}
    renderItem={this.renderCityGroup}
    style={styles.cityList}
    keyExtractor={(item, index) => item + index}
    getItemLayout={(data, index) => {
        return {
            length: data.height,
            offset: data.total
        }
    }}
    ref={ref => this.cityListRef = ref}
/>

这是我当前的代码。

我想显示一个平面列表，但我有一个问题。在手机底部，我无法显示帖子的完整性，也不要滚动到它。我不知道为什么。有些问题？我尝试了一些有风格的间距东西，但这不像我想要的那样工作。

import React, { Component } from 'react'
import { View, Text, FlatList } from 'react-native'
import BlockPhoto from '../ui/BlockPhoto';
import { isTemplateElement } from '@babel/types';

interface Props { }

interface State { monTabPost: Array<TabPost> }

interface TabPost { id: number, title: string, }

const monTabPost: Array<TabPost> = [
{ id: 1, title: "Chat 1", },
{ id: 2, title: "Chat 2", },
{ id: 3, title: "Chat 3", },
{ id: 4, title: "Chat 4", },
{ id: 5, …