nteractionmanager 可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证 JavaScript 动画的流畅运行。
import React from 'react'
import { useEffect, useState } from 'react'
import { InteractionManager, View, Text, ActivityIndicator } from 'react-native'
import ErrorBoundary from './ErrorBoundary'
function AsyncRender(props: any) {
const [show, setShow] = useState(false)
const useMount = (func: Function, params: any[] = []) => useEffect(() => func(), params)
useMount(() => {
const interactionPromise = InteractionManager.runAfterInteractions(() => setShow(true))
return () => interactionPromise.cancel()
}, props.list)
if (!show) {
return (
<View>
<ActivityIndicator size="small" />
</View>
)
} else {
try {
return <ErrorBoundary>{props.children}</ErrorBoundary>
} catch {
return <></>
}
}
}
export default React.memo(AsyncRender)
