标签: react-native-flatlist

我想从我的应用程序中删除"加载更多"按钮并实现"无限滚动"类型的功能,该功能允许用户向上滚动其消息历史记录并按照请求下载旧消息.

由于ListView正在被删除,我正在转向FlatList组件,我正在尝试找出一个很好的实现来确定用户何时滚动到页面顶部.由于FlatList总是从列表顶部开始,我们希望确保仅onTopReached在用户滚动列表时调用.

我怎么能这样做？

开放源代码实现的链接将受到赞赏,但应列为注释而不是答案.使用ListView的实现是无关紧要的.

我有一个FlatList我想根据方向更改列数的地方.但是,当我这样做时,我会看到红色屏幕.根据红屏错误消息,我不太确定我应该如何更改关键道具.任何帮助表示赞赏.

      // dynamically changing number of columns
      const numCols = orientation === constants.PORTRAIT ? 3 : 8

      <FlatList
        keyExtractor={(_, i) => i}
        numColumns={numCols} // assigning the number of columns
        horizontal={false}
        renderItem={({ item }) => <ListItem imageUrl={item.url} />}
      />}

我有一个包含大量内容的平面列表，当我在调试器控制台上滚动10到15页后向下滚动时，我得到了以下信息：

VirtualizedList：您有一个更新缓慢的大列表-确保您的renderItem函数呈现遵循React性能最佳实践的组件，例如PureComponent，shouldComponentUpdate等。{dt：582，prevDt：1651，contentLength：15187.5}

仅供参考：我尝试过使用PureComponent和更多方式，但没有人帮忙，我在控制台中得到了相同的输出。

为什么我得到这个，如何解决呢？

这是我的代码：

<FlatList
    data={outfits}
    keyExtractor={(item, index) => index}
    numColumns={2}
    initialNumToRender={5}
    getItemLayout={(outfits, index) => (
       { length: 50, offset: 50 * index, index }
    )}
    extraData={this.state.extraData}
    renderItem={({item,index}) => <Items item={item} index={index}/>}
    onRefresh={this.handleRefresh}
    refreshing={this.state.refreshing}
    onEndReached={this.handleLoadMore}
    onEndReachedThreshold={20}
    ListFooterComponent={this.renderFooter}
/>

我完全承认我现在对Reactive Native很新,所以我预计这是一个简单的答案和一个潜在的愚蠢问题:)事实上,这可能不是RN问题本身,我将在下面解释.

我所拥有的是以下代码:

class MyScreen extends React.Component {

  constructor(inProps) {
    super(inProps);
    this.state = { listData : [ ] };
  }

  render() { return (
    <View>
      <FlatList data={ this.state.listData }
        renderItem={ ({item}) =>
          <Text>{item.firstName} {item.lastName}</Text>
        }
      />
    </View>
  );  }

  async componentDidMount() {
    const data = [ ];
    let keys = await AsyncStorage.getAllKeys();
    keys.forEach(async function(inKey) {
      let obj = await AsyncStorage.getItem(inKey);
      obj = JSON.parse(obj);
      data.push(obj);
    });
    this.setState({ listData : data });
  };

}

目标只是从AsyncStorage加载数据并将其转储到列表中.看起来相当基本,对吧？不幸的是,我无法让它工作:列表是空的.

现在,为了掩盖愚蠢的事情:是的,确实存储了数据,是的,它是正确的形式(我知道这是因为如果我只是抓住一个SPECIFIC项目并将其推送到数据中,那么它会按预期显示在列表中).

实际上,我知道问题是什么:它是在keys.forEach()调用完成之前执行的setState()调用.我知道这个,因为如果我用这个替换setState()调用:

setTimeout(function() {
  this.setState({ listData : …

我使用react-native FlatList组件来查看项目列表Pagination没有按预期发生,因为文档onEndReached必须在到达页面结束时被触发,目前我尝试更改onEndReachedThreshold的值(尝试0.1,1.0,0.5, 0.01),我也设置刷新标志.注意:我使用的是ReactNative 0.48.4所以这里是我的代码

<Container style={{ marginTop: 22 }}>
      <Content
        style={{ flex: 1 }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <View style={{ flex: 1 }}>
          <FlatList
            initialNumToRender={10}
            refreshing={this.state.refreshing}
            onEndReachedThreshold={0.5}
            onEndReached={({ distanceFromEnd }) => {
              console.log('on end reached ', distanceFromEnd);
            }}
            data={this.props.messages}
            renderItem={this.notificationContent.bind(this)}
            keyExtractor={(item) => item._id}
          />
        </View>
      </Content>
    </Container>

我已经尝试了所有可能的解决方案作为回应github问题

这里有帮助吗？

我想在FlatList或ScrollView中滚动时禁用TouchableOpacity的突出显示.滚动时onPress没有触发,它只是被触发的突出显示效果.

我尝试过delayPressIn但它只延迟onPress时间而不是突出显示效果.

我正在尝试使用使用 Flatlist 的react-native-snap-carousel呈现大量项目。

我的问题是，如果它的索引是 100，我如何立即呈现该项目？如果我下面的代码的 firstItem 索引更高，则性能会很慢。考虑到我已经有了需要渲染的数据。

<Carousel
        data={this.state.data}
        renderItem={this._renderItem}
        itemWidth={WINDOW_WIDTH}
        sliderWidth={WINDOW_WIDTH}
        removeClippedSubviews={true}
        initialNumToRender={this.state.initialIndex + 1}
        maxToRenderPerBatch={3}
        firstItem={this.state.initialIndex}
      />

I have a flatlist showing videos. I want that when a video goes out of the view it should be paused. I am maintaining the pause state in each of the Posts component.

class Posts extends React.PureComponent {

constructor() {
 super()
 this.state = {
   pause: true,
 }

 return(){
  <Video
    pause={this.state.pause}
    //other props
  />
 }

}

I am using react-native-video.

我已经尝试使用onViewableItemsChangedof的道具，Flatlist但是它不会改变状态。

我试过了。但这似乎对我不起作用。

我应该如何进行？

我正在构建一个聊天应用程序，从React-Native版本开始0.63，当Android上的倒置 Flatlist 中涉及长文本时，我的性能很差。

这是展示该问题的小吃再现（仅在尝试使用物理 Android 手机时可见）。

我为它报告了一个错误。对于正在使用倒置 Flatlist 构建聊天应用程序的任何人来说，这应该是相当公然的，但不知何故，我没有看到任何地方都在谈论这个问题。

这让我觉得也许其他人已经以某种方式解决了它？如果是，我该如何解决？它使我的应用程序现在几乎无法使用。

我有一个带有两列的平面列表，用于呈现卡片组件。一旦用户点击一张卡片，它就会通过 React Native 的 Animated API 弹出。

我将单击组件的 ZIndex 值更改为 10。当它关闭时，该值设置为 0。

问题是这个逻辑只适用于行元素，而不适用于行之间。因此，位于较低索引行中的所有其他卡片都位于其他卡片之后。

我应该怎么做这个问题？先感谢您。

这是示例；