react-native - 当任何项目更改在选项卡视图中

Question

我正在使用 react-native-community/react-native-tab-view 来呈现两个平面列表，它们基本上是带有复选框的清单。

平面列表的代码从以下位置返回：

const ListRoute = () => {
return (
 <FlatList
   data={data}
   renderItem={({item, index}) => {
     return (
       <View>
         <Item
           ...checkbox code
         />
       </View>
     );
   }}
   keyExtractor={(item, index) => item.id + '1'}
   listKey={(item, index) => item.id + '2'}
   removeClippedSubviews={true}
   extraData={(updateItem, subscriptionItems)}
 />
);
};

选项卡视图代码是

<TabView
renderTabBar={ChallengeTabBar}
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>

渲染场景为

  const renderScene = SceneMap({
    first: ListRoute,
    second: FriendRoute,
  });

该复选框从主功能类中获取 updateItem 函数，并将其 ID 添加到勾选框列表中。当我使用 listRoute 函数时，单击复选框会导致整个平面列表重新呈现，并且用户被带到列表的顶部。如果我不使用函数而只是将平面列表单独放入，那么这不会发生。

编辑：经过进一步调查，如果我完全删除选项卡视图部分，我仍然会遇到同样的问题。如果我只是将平面列表放入，则列表不会重新呈现到顶部，但如果我将组件放入，则它会。

Answer 1

您应该使用 useEffect 来避免重新渲染 FlatList。您需要检查不变性意味着您要替换 flatlist 的数据。对复选框勾选使用过滤方法。