当一个项目被交互时，React Native FlatList从一个函数或const返回，从顶部重新渲染。

Question

我想把一个flatlist checklist放到一个react native tab视图中，要做到这一点，你需要把flatlist声明为const，这样就可以像.NET一样使用。不幸的是，每当我点击列表底部的一个项目时，它就会弹回顶部并重新显示列表。当一个flatlist直接被渲染到你的组件渲染函数中时，这个问题就不会发生。

我已经做了一个简化版的意思。https:/snack.expo.ioecO7YYlVZ 是点击一个项目就会弹到顶部的版本。https:/snack.expo.io1iQ！ILk4B。 是点击一个项目不会弹到顶部的版本。

两者唯一的区别是不能用的版本是这样的

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

而工作版本是这样的

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

EDIT: 我需要以一种可以使用react-native-tab-view将其添加到标签页的方式来拥有平列表。https:/github.comreact-native-communityreact-native-tab-view。

Answer 1

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

相反，当你在render()之外创建一个组件时，组件本身不会重新初始化，而只是更新数据。

您的数据组件

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

用render()的外部来检查这个例子。

https:/snack.expo.io@jsfitflatlist。