当与项目交互时，从函数返回的 React Native FlatList 或 const 从顶部重新呈现 [英] React Native FlatList returned from a function or const rerenders from the top when an item is interacted with

问题描述

我正在尝试将 flatlist 清单放入 React Native 选项卡视图中，为此您需要将 flatlist 声明为 const 以便它可以像 .不幸的是，每当我点击列表底部的一个项目时，它就会弹回到顶部并重新呈现列表.将 flatlist 直接渲染到组件渲染函数中时，不会出现此问题.

我已经简化了我的意思.https://snack.expo.io/ecO7YYlVZ 是点击项目弹出顶部的版本https://snack.expo.io/1iQ!ILk4B 是点击项目的版本不会弹出到顶部.

两者唯一的区别就是不工作的版本是这样的

 const Dat = () =>{返回 (<平面列表style={styles.container}数据={行数据}renderItem={this.renderItem}keyExtractor={extractKey}/>);};返回<数据/>;

而工作版本是这样的

 返回 (<平面列表style={styles.container}数据={行数据}renderItem={this.renderItem}keyExtractor={extractKey}/>);

我需要使用 react-native-tab-view 将平面列表添加到选项卡中:https://github.com/react-native-community/react-native-tab-view

解决方案

Dat 组件必须在 render() 之外因为它重新初始化整个组件，然后重新渲染导致这种行为

相反，当您在 render() 之外创建组件时，组件本身不会仅重新初始化更新的数据

你的数据组件

const Dat = () =>{返回 (<平面列表style={styles.container}数据={行数据}renderItem={this.renderItem}keyExtractor={extractKey}/>);};

使用 render() 外部检查示例

https://snack.expo.io/@jsfit/flatlist

I'm trying to put a flatlist checklist into a react native tab view, to do that you need to declare the flatlist as a const so it can be used like . Unfortunately whenever I click on an item at the bottom of the list it pops back to the top and rerenders the list. This problem doesn't occur when a flatlist is rendered directly into your components render function.

I've made a simplified version of what I mean. https://snack.expo.io/ecO7YYlVZ Is the version where clicking an item pops to the top https://snack.expo.io/1iQ!ILk4B Is the version where clicking an item doesn't pop to the top.

The only difference between the two is the not working version is like this

    const Dat = () => {
  return (
    <FlatList
      style={styles.container}
      data={rowsData}
      renderItem={this.renderItem}
      keyExtractor={extractKey}
    />
  );
};
return <Dat />;

Whereas the working version is like this

    return (
  <FlatList
    style={styles.container}
    data={rowsData}
    renderItem={this.renderItem}
    keyExtractor={extractKey}
  />
);

EDIT: I need to have the flatlist in a way that I can add it to a tab using react-native-tab-view: https://github.com/react-native-community/react-native-tab-view

解决方案

Dat component must be outside of render() because it reinitializes the whole component and then rerenders that which cause that behavior

instead, when you create a component outside of the render(), the component itself does not reinitialize only data updated

Your Dat component

const Dat = () => {
  return (
    <FlatList
      style={styles.container}
      data={rowsData}
      renderItem={this.renderItem}
      keyExtractor={extractKey}
    />
  );
};

Check the example with the outside of render()

https://snack.expo.io/@jsfit/flatlist

这篇关于当与项目交互时，从函数返回的 React Native FlatList 或 const 从顶部重新呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！