标签: react-native-sectionlist

对于我正在从事的项目，我需要创建一个组件，用户可以在其中向处于状态的数组添加条目，并SectionList显示这些条目。另外，输入后，我需要SectionList向下滚动到最新条目。请查看此小吃作为示例

列表本身会显示所有条目并在添加新条目后进行更新，但是一旦列表包含的内容超出了屏幕显示的范围，它只能向下滚动到倒数第二个，我确实需要滚动到最后一个。

我尝试了许多事情，包括等待setState，定义contentContainerStyle，将整个事情转换为VirtualizedListand ScrollView，这是我能想到的，但是我根本无法让它滚动到最后一个条目。

问题：如何使我的SectionList滚动到当前超出SectionList组件范围的最后一项？

UPDATE 我知道此问题是由于SectionList调用scrollToLocation时尚未包含该项目引起的。解决方案的关键似乎是等待列表的重新呈现

UPDATE 2 SetState的回调也无法解决此问题。但是，此注释中的解决方案有效。它的问题在于它仅适用于.js文件，而我在整个项目中都使用.tsx文件。我该如何克服呢？

我想用来getItemLayout让<FlatList />效率更高。

但是当用于onLayout获取不稳定的列表高度时，可能是 128 或 230 或 183。

所以设置itemHeight为128进getItemLayout是不能正常工作的。

有没有其他方法可以让我itemHeight的动态高度进入我的getItemLayout？

onLayout(event) {
  const {x, y, height, width} = event.nativeEvent.layout;
  console.log('height:', height); // the height is dynamic
}

renderItem = ({ item }) => {
  return (
    <View onLayout={(event) => this.onLayout(event)} style={styles.floorView} style={styles.itemView}>
      <Text>{item.name}</Text>
    </View>
  );
}

<FlatList
  data={DUMMY_LIST}
  ref={(ref) => { this.flatListRef = ref; }}
  renderItem={this.renderItem}
  numColumns={1}
  keyExtractor={(item, index) => index.toString()}
  getItemLayout={(data, index)=> {
  return { …

我在我的 React Native 项目中使用 Flatlist 和 SectionList，并且有 300 多行数据。然而，我发现一个严重的问题，就是当我不断向下和向上滚动时，内存使用率越来越高。我怎么解决这个问题？或者我怎样才能释放内存？

我知道这里有一些相关的问题，但我尝试了很多解决方案，但没有一个有效。

举些例子，

1.我使用了Pure.component或者shouldcomponentUpdate

2.我使用了Flatlist和SectionList的一些props

initialNumToRender={9}
windowSize={10}
maxToRenderPerBatch={2}
removeClippedSubviews={true}
disableVirtualization={true}
getItemLayout={this.getItemLayout}
keyExtractor={(item, index) => item[0]}
extraData={this.state}

还有其他解决方案可以帮助我解决问题吗？多谢！

<SectionList
  sections={[{ data: [1, 2] }, { data: [3, 4] }]}
  renderItem={({ item, index }) => ...}
  renderSectionHeader={({ section, index }, i) => {
    console.log(index, i); // both undefined
  }}
/>

我想得到该部分的索引renderSectionHeader.
例如.index应该是0时section.data是[1, 2]1时section.data是[3, 4].

除了为sections数据添加索引之外,我该如何实现这一目标？

我正在使用 TypeScript 构建一个 React Native 应用程序。我正在尝试使用SectionList. 我遵循了文档，这是我的代码：

  renderSectionHeader = ({ section: { title } }: { section: { title: string } }) => (
    <ListItem title={title} />
  );

  render() {
    const { sections } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          keyExtractor={this.keyExtractor}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={this.renderSectionHeader}
        />
      </SafeAreaView>
    );
  }

但该行renderSectionHeader={this.renderSectionHeader}引发以下 TSLint 错误：

[ts]
Type '({ section: { title } }: …

我无法解决与SectionList - React-native 组件相关的问题。

这是我的数据结构：

[
  {
    id: 'newKey1',
    image: '',
    title: 'Men Clothing',
    subCategory: [
      {
        id: 'key1',
        displayName: 'value1',
        image: '',
      },
      {
        id: 'key2',
        displayName: 'value2',
        image: '',
      },
    ],
  },
  {
    id: 'newKey2',
    image: '',
    title: 'Women Clothing',
    subCategory: [
      {
        id: 'key1',
        displayName: 'value1',
        image: '',
      },
      {
        id: 'key2',
        displayName: 'value2',
        image: '',
      },
      {
        id: 'key3',
        displayName: 'value3',
        image: '',
      },
    ],
  },
];

我正在尝试实现SectionList，data上面传递的常量值在哪里。

 return (
<View style={styles(theme).container}>
        <AdBanner /> …

我对 React 和 React Native 相当陌生，但是在填充 a 时遇到了一个问题，但还SectionList没有找到解决方案。

我有一个对象数组，每个对象都有自己的数组。SectionList 是显示此信息的理想选择，但是，每个部分的数组不称为“数据”，而SectionList似乎期望每个部分中的数组的键“数据”。

有没有办法告诉SectionList使用另一个键而不是数据键来填充每个部分的数组？

我想在带有部分列表的网络上实现类似 scrollspy 的功能。我正在使用 scrollToLocation 方法。问题是滚动完成后滚动正在跳跃。我认为它是由加载前几行引起的。即使提供 getItemLayout 道具，我也不知道为什么会发生此问题。这是一个基本的演示。您可以在此处找到完整的代码示例。

这是我的部分列表：

 <SectionList
    style={{ backgroundColor: 'blue' }}
    renderItem={this.renderItem}
    renderSectionHeader={this.renderSectionHeader}
    sections={sections}
    keyExtractor={(item, index) => item.id}
    getItemLayout={this.getItemLayout}
    ref={me => this.sectionList = me}
    maxToRenderPerBatch={20}
  />

这是我的getItemLayout功能：

 getItemLayout = (
  data,
  index,
 ) => {
   const layoutTable = layoutTableGenerator(data, 100, 40)

   return {length: layoutTable[index].length, offset: layoutTable[index].offset, index}
  }

这是我生成数据的辅助函数getItemLayout：

 module.exports = (sections, itemHeight, sectionHeaderHeight, sectionFooterHeight = 0) => {
   return sections.reduce((layoutTable, section, sectionIndex) => {
     const layoutTableLastItem = layoutTable[layoutTable.length - 1]
     const …

所以我想以一种非正统的方式使用RN Section列表。

我希望部分列表将渲染传递给组件，因为渲染不会非常统一。

我想使用部分列表，以便在滚动时仍然可以看到标题。

我制作了一个接收子项并将其呈现在部分列表中的组件，如下所示：

class SomeSectionList extends Component {

    render() {
        let sections = React.Children.map(this.props.children, (Child, index) => {
            return {title: Child.type.title, data: [''], renderItem: () => Child, index }
    });

        return (
            <SectionList

                renderSectionHeader={({section}) => {
                    return <Text style={{ fontWeight: "bold" }}>{section.title}</Text>
        }}
                sections={sections}
                keyExtractor={(item, index) => item + index}
            />
        );
    }
}

用法将类似于：

                <SomeSectionList>
                    <Comp1 />
                    <Comp2 />
                </SomeSectionList>

但是，我的问题是。说在这种情况下，Comp1不会从其组件中呈现任何内容，我希望能够从部分列表中隐藏其部分。

SomeSectionList组件如何知道它没有呈现任何内容或没有数据可以呈现任何内容，因此可以隐藏它的section和header？

任何建议都很好。我觉得使用SectionList这样做是过分的（但它使标头显示得更好），因此也对替代品开放。

描述

我在里面使用水平选项卡栏ListHeaderComponent，我想将其ListHeaderComponent作为SectionList中的粘性标题。我们可以在平面列表中制作粘性标题，但它在部分列表stickyHeaderIndices={[0]}中不起作用

React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 38.35 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.15.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 28, 29
        Build Tools: 28.0.3, 29.0.1, 29.0.2
        System Images: android-26 …