在react render[duplicate]中使用异步和等待

Question

我试图在反应本机中捕捉状态栏的高度。

为此我写了以下代码

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）显示为{height:44}，我打算将其存储在statusBarHeight中，但之后的第二个console.log给了我未定义的值

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

这让我想到StatusBarManager.getHeigh（是async函数。那么，有人能帮我计算一下高度吗？我们如何使用async wait来呈现react native

Answer 1

如果你想在没有听众的情况下获得高度，你可以通过以下方式做到：

const height = await StatusBarHeight.getAsync();

Answer 2

你不应该在渲染函数中使用异步函数，因为它会阻止你的渲染，它应该总是响应，而不是阻止你的整个应用程序，如果你延迟渲染函数会发生这种情况。将你的statusBarHeight保存在状态中，并在渲染函数中访问它，并且只在外部更改时更新它（例如组件）。

第二个console.log返回未定义，因为渲染不等待promise（StatusBarManager.getHeight）来解决，并将立即执行渲染函数。解决promise后，您将看到具有statusBarHeight的其他console.log。所以本质上，不，你不能也不应该使渲染异步并将其保存在其他地方。