使用异步并等待React渲染

Question

我试图捕获React Native中的状态栏。

我写了以下代码

render() {
    let StatusBarHeight = null
   if (Platform.OS === 'ios') {
     StatusBarHeight = StatusBarManager.getHeight((statusBarHeight)=>{
                console.log(statusBarHeight)
                return statusBarHeight
            })
     console.log(`This is the height of the status bar in iOS:`,StatusBarHeight)
    }
}

在这里，console.log(statusBarHeight)即将成为我打算存储在StatusBarHeight中的{height: 44}

console.log(`This is the height of the status bar in iOS:`,StatusBarHeight)

这让我认为StatusBarManager.getHeigh(是async功能。因此，有人可以帮助我找出身高，我们如何在反应

Answer 1

您绝对不要在渲染函数中使用异步函数，因为它会阻止您的渲染，并且它应该始终响应且不会阻止您的整个应用程序，如果您延迟渲染函数，这将会发生。将您的状态保存在状态中，并在渲染函数中访问并仅在外部更改上进行更新(例如，例如componentDidudpate。

第二个控制台。log返回未定义，因为渲染不会等待承诺(statusbarmanager.getheight(解决并立即执行渲染函数。解决诺言后，您会看到另一个控制台。因此，从本质上讲，不，您不能也不应该使渲染异步并保存在其他地方。

Answer 2

如果您想在没有听众的情况下获得高度，则可以使用以下操作：

const height = await StatusBarHeight.getAsync();