我正在使用 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 函数时,单击复选框会导致整个平面列表重新呈现,并且用户被带到列表的顶部。如果我不使用函数而只是将平面列表单独放入,那么这不会发生。
编辑:经过进一步调查,如果我完全删除选项卡视图部分,我仍然会遇到同样的问题。如果我只是将平面列表放入,则列表不会重新呈现到顶部,但如果我将组件放入,则它会。