在 react native 中使用 FlatList 组件时,我需要知道所有可见项目何时被渲染。
我提供data
和 renderItem
当我得到 componentDidMount
我可以在那里看到 FlatList,但是因为 FlatList 组件异步呈现每个项目,它们只在 componentDidUpdate
之后显示.此外,这可能(并且可能会)包括不可见的项目。
我想知道是否有人找到了一种可能的方法来控制进程(不使用 setTimeout
)来了解可见项目何时完全呈现。
谢谢。
最佳答案
我最终使用了 componentDidMount
的renderItem
组件作为元素被渲染的指示器。
在下面的示例中 ActivityIndicator
将一直显示到前 10 个项目被渲染(我在 initialNumToRender
中设置的数字)。
这种方法并不理想。您可能需要根据您的情况对其进行调整,但总体思路如下所示。
这是列表项:
class ListItem extends React.Component<{ onRendered: () => void }> {
componentDidMount(): void {
this.props.onRendered();
}
render() {
return (
<View>
<Text>Item</Text>
</View>
);
}
}
这是带有
FlatList
的屏幕使用上面的 ListItem:export class FlatListTestScreen extends React.Component<any, { creating: boolean }> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
creating: true,
};
}
onRenderedItem = () => {
this.setState({
creating: false,
});
};
renderItem = (item: any) => {
return <ListItem onRendered={this.onRenderedItem} />;
};
dataArray = Array(20)
.fill('')
.map((_, i) => ({ key: `${i}`, text: `item #${i}` }));
render() {
const loader = this.state.creating ? <ActivityIndicator /> : <></>;
return (
<View>
{loader}
<FlatList
initialNumToRender={10}
data={ this.dataArray }
renderItem={ this.renderItem }
keyExtractor={ item => item.key }
/>
</View>
);
}
}
我还尝试使用 map 来收集渲染项目的数量,但在实践中,它们似乎都触发了
componentDidMount
同时,更简单的方法可能会更好。
关于javascript - React-Native (FlatList) : How to know when the rendering of visible items has finished,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60210693/