标签: react-native-flatlist

我正在尝试设置反应原生的平面列表的刷新指示器,但不知道如何做到这一点.List View有这个道具:

refreshControl={<RefreshControl
                        colors={["#9Bd35A", "#689F38"]}
                        refreshing={this.props.refreshing}
                        onRefresh={this._onRefresh.bind(this)}
                    />
                }

但是Flat List只有这些:

refreshing={this.props.loading}
onRefresh={this._onRefresh.bind(this)}

我的代码获取Json数据到一个数组使用a列出数据FlatList.它看起来像电话簿照片和文本连续.

这是我的代码:

  renderItem = ({ item }) => 
    (
    <ListItem
      title={item.username}
      avatar={{ uri: item.photo }}
    />
    )


  render() {
    console.log(this.state.myData);
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.myData}
          renderItem={this.renderItem}
        />
      </View>
    );
  }

它的工作和我得到输出,但性能很慢.渲染大约需要10秒钟,这对用户来说很烦人.我该怎么做才能让它更快？

我有一个FlatList组件,每行内部都有一个Input.当我选择输入时,我希望它向上滚动键盘上方.

我的代码:

return (
    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} >
    <FlatList
      style={{ flex: 1, backgroundColor: '#fff' }}
      data={ds}
      renderItem={({ item }) => <ListItem data={item} />}
      ListFooterComponent={this.renderButton}
    />
  </KeyboardAvoidingView>
);

在这种情况下,从不加载FlatList.当我flex:1从两个组件中删除时,FlatList正确呈现,但选择一个输入不会使其向上滚动

我 1 个月前开始使用 react native。现在我开始构建一个简单的从互联网获取数据并显示如下图所示的布局。

将这些结果放入网格的最佳方法是什么？

这是我的简单代码

 render() {
  <FlatList
      data={newsData}
      renderItem={
        ({item,index}) =>
        index === 0 ? this._renderHighlightedVideo(item.node,index) :
        index === 5 ? this._renderAdvertisment() :
        index > 10 && (index+2) % 7 === 0 ? this._renderAdvertisment() :  this._renderGridVideo(item.node, index)
      }
      keyExtractor={(item, index) => index}
      />
 }




_renderHighlightedVideo(news, index) { }
_renderAdvertisment(){ }
_renderGridVideo(item.node, index){ }

我正在尝试使用onViewableItemsChanged事件来检测当前显示在屏幕上的 FlatList 的项目。

在我的 ViewabilityConfig （下面提供了代码）中，我将itemVisiblePercentThreshold参数设置为 100，我认为这将要求我的项目完全显示才能被视为可查看。但对我来说情况并非如此。

正如您在下面的屏幕截图中看到的： 我的应用程序的屏幕截图

很明显，最上面的项目没有完全显示在屏幕上（这应该使可见项目仅包含 3 个项目）。但是，当我在onViewableItemsChanged事件处理程序中打印数组的长度时，它返回 4（当我检查值时，包括最上面的项目）。

可查看项目数组长度的日志结果

这是 FlatList onViewableItemsChanged事件的问题吗？或者我实施得不正确？

我试图从文档和 React-native github 中找到解决方案，但没有关于此事件如何工作的进一步解释。

我的代码的一些相关片段如下：

平面列表定义

<FlatList
                    viewabilityConfig={this.clippingListViewabilityConfig}
                    inverted={true}
                    horizontal={false}
                    data = {this.props.clippingResultArray}
                    ref={(ref) => this.clippingResultFlatList = ref}
                    style={{
                        // flexGrow:0,
                        // backgroundColor: 'green',
                        // width:'100%',

                        // width: Dimensions.get('window').width,
                    }}
                    contentContainerStyle={{
                        // justifyContent:'flex-end',
                        // flexGrow:0,
                        // flexDirection:'row',
                        // alignItems:'flex-end',
                    }}
                    renderItem={this.renderClippingListItemRight}
                    keyExtractor={(item, index) => index.toString()}
                    onViewableItemsChanged={this.onClippingListViewableChanged}
                    // removeClippedSubviews={true}

                    {...this._clippingListItemPanResponder.panHandlers}
                />

onViewableItemsChanged 侦听器

onClippingListViewableChanged = …

我希望有一组选项卡，每个选项卡都有FlatList一个ScrollView。这类似于Instagram或Twitter的布局。

我知道，由于仅注册了滚动事件，所以在a FlatList内部有一个问题ScrollView并触发onEndReached 存在一些问题ScrollView？

这导致内部onEndReached在加载时立即被调用，然后又一次又一次地被调用...

如果将ScrollView scrollEnabled设置为false flex: 1，flexGrow: 1则可以使内部FlatList滚动，但不使外部内容滚动……如下所示：

我认为很多人都在为这个问题而苦苦挣扎，我在任何地方都找不到真正明确的解决方案。

我也试图实现react-navigation-collapsible与createMaterialTopTabNavigator创建标签。但是，您不能在整个屏幕上实现“拉动刷新”吗？

任何帮助将非常感激。

更新资料

我也研究了实现：ScrollView中的FlatList不滚动

并且我研究了动态切换scrollEnabled属性（即使它创建了一个重新渲染。此ALMOST可以工作...但是ScrollView高度存在问题，flexGrow: 1并且内部FlatList没有填充空间...

第二次更新

这种零食几乎可以做正确的事... https://snack.expo.io/@satya164/collapsible-header-with-tabview 它react-native-tab-view使用动画折叠标题。如果标头是组件，则它可以在加载时获取数据，但内部列表上将仅具有拉动刷新功能（与Instagram不同）。

相关问题：

onEndReached被无限调用存在一个问题-https: //github.com/facebook/react-native/issues/18887-https : //github.com/facebook/react-native/issues/6002

FlatList无法在ScrollView内部正常工作...- https://github.com/facebook/react-native/issues/12827#issuecomment-320509824

ScrollView内部的平面列表-https: //github.com/facebook/react-native/issues/19971

ScrollView中的FlatList无法滚动-https: //github.com/facebook/react-native/issues/19971

FlatList子对象正在渲染上调用onEndReached- https://github.com/react-native-community/react-native-tab-view/issues/501

React Native嵌套Listview多次触发onEndReached- React Native嵌套ListView多次触发onEndReached

当FlatList包装在ScollView中时，onEndReached无法正常工作。- https://github.com/facebook/react-native/issues/22008

类似Twitter的个人资料布局- 如何创建类似Twitter的个人资料布局？但是我相信答案现在是不正确的。

是否可以允许某个项目溢出 FlatList 组件的容器？在此示例中，FlatList 中的项目是常规 View 组件，其中有一个“弹出窗口”View 组件，我希望将其显示在 FlatList 容器的边界上。

在这里您可以看到红色框被 FlatList 容器的边界剪裁

这就是我想要实现的目标（红色框（绝对定位）溢出了 FlatList 组件的边界）

我的代码

const Item = () => {
    return (
        <View // this view should be clipped and go inside the container
            style={{
                height: 55,
                width: 55,
                backgroundColor: 'lightblue',
                margin: 5,
        }}>
        <View // this view should display over FlatList boundaries
            style={{
                height: 30,
                width: 30,
                backgroundColor: 'red',
                position: 'absolute',
                left: -15,
                top: -15,
                zIndex: 40,
            }}
        />
        </View>
    );
};

const App = () => …

我在我的 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}

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

平面列表不在绝对视图内滚动这是我的代码，但如果我删除绝对它工作正常

<View style={{ flex: 1, marginTop: 8 }}>
        <Input ref={input => {
          this.input = input;
        }}
          onFocus={() => {
            this.setState({ showPicker: true })
          }}
          onEndEditing={() => {
            this.setState({ showPicker: false })
          }}>
        </Input>
        <View style={{ position: "relative", zIndex: 9999, margin: 8 }}>
          {
            this.state.showPicker ?
              <View style={{position:"absolute",width:"100%", backgroundColor: "white" }}>

                  <FlatList

                    data={["A", "B", "C", "D", "E", "F", "G", "H", "A", "B", "C", "D", "E", "F", "G", "H"]}
                    showsVerticalScrollIndicator={false}
                    renderItem={({ item }) =>
                    <TouchableWithoutFeedback>
                      <View>
                        <View style={{ width: "100%", height: 50 …

我正在使用react-native-flatlist网格滚动来自服务器的最大数据并获取并显示在我的屏幕上。但我的应用程序中的滚动并不流畅。

有什么解决办法吗？

滚动屏幕时我也面临着空白。列表消失并在 UI 中显示空白区域。

有什么解决办法吗？

import React, { Component } from 'react';
import {
  ActivityIndicator,
  Image,
  Platform,
  StyleSheet,
  Text,
  FlatList,
  Button,
  View,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  PixelRatio,
  Dimensions,
  StatusBar
} from 'react-native';
import _ from 'lodash';
import ImageCropPicker from 'react-native-image-crop-picker';
import Orientation from 'react-native-orientation';
import FastImage from 'react-native-fast-image';

class MyShowroom extends Component {
  constructor() {
    super();
    this.state = {
      index: 0,
      section: 0,
      width: 0,
      height: 0,
      isPageLoaded: false,
      loadingMoreItems: false,
      lastItemIndex: 0,
      page: 0,
    }
    Orientation.addOrientationListener(this._updateOrientation.bind(this))
  }


        renderList(item) { …