如何在反应原生导航器中执行异步代码？

Question

附件是一个小的工作示例。我想知道当导航容器在下面的示例附近做出决定时如何执行异步代码。我知道在这段代码中没有什么让 async 变得特别，但在我的实际代码中，我有一个异步服务器获取函数。

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { Provider as PaperProvider } from 'react-native-paper';
import { createDrawerNavigator } from '@react-navigation/drawer';

var is_authorized = false

async function doSomething(){
  console.log("I do something asynchronus here.")
  is_authorized = !is_authorized
}
function Drawer1(){
  return(
    <Text>Drawer 1</Text>
  )
}
function Drawer2(){
  return(
    <Text>Drawer 2</Text>
  )
}
function LoginScreen(){
  return(
    <Text>LoginScreen</Text>
  )
}
export default function App() {

    return (
    <PaperProvider>
      <NavigationContainer>
        {is_authorized ? (
            <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
              <Drawer.Screen name="Drawer1" component={Drawer1} /> 
              <Drawer.Screen name="Drawer2" component={Drawer2} />
            </Drawer.Navigator> 
          ) : (
            <LoginScreen/>
          )
        }      
      </NavigationContainer>
    </PaperProvider>  
  );
}

换句话说，每次执行is_authorized ? (，我都想在之前执行await doSomething()。我不确定它是否相关，但我正在使用托管工作流程（expo）运行它。

编辑：我认为需要运行的异步函数是一个循环，用于检查 websocket 是否有新消息，并在等待消息时休眠。我在这里使用 await 来睡觉。

this.websocket.onmessage = function(evt) {
  let json_message = JSON.parse(evt.data)
  let message_id = json_message["message_id"]
  this.message_dict[message_id] = json_message;
}
//...
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
//...
for (var i = 0; i < timeout*2; i++) {
  if (message_id in this.websocket.message_dict){
    ...
  }
  await sleep(500)
}

Answer 1

这是一个有趣的问题。我会做一些假设，但我想我可以把你带到你需要去的地方。根据您上面的代码，我将假设您正在使用某种堆栈管理器，它会导入项目中的所有文件。

您将需要一个 useState 函数。然后，在代码的某个地方，您需要编写一个“const”函数来返回一个 Promise。然后，您可以接受该承诺并将其路由以检查它是否已通过您的堆栈管理器的身份验证。如果身份验证为真，它将让您访问您的文件；否则它不会让你通过。它可能看起来像这样：

const [authentication, setAuthentication] = React.useState(false) //this will set the initial return to be false, and will only navigate you forward if verified

const getAuthentication = () =>{
 (async () => { //this will execute the function asynchronously 
let authentication_promise = await server.is_auth() //this calls back to what I am assuming will be a server. It will determine authentication credentials from here
setAuthentication(authentication_promise)//This fills the second part of the preset false variable above
    }
    )
   ()
return (authentication) //this returns either a true or false statement based on what "setAuthentication" returns
}


<NavigationContainer>
    { getAuthentication() ? ( //If credentials are verified, promise will return true, and change the initial "const" from above from false to true, and allow you to proceed.
...
}
</NavigationContainer>