ActivityIndi​​cator 与 Expo Camera 进行 takePictureAsync

Question

我正在开发一个 React Native 应用程序，我想在 Expo Camera 处理图像时显示一个 ActivityIndi​​cator 组件。

<TouchableOpacity style={{alignSelf: 'center'}} onPress={takePicture}>    
  <FontAwesome name="camera" style={{ color: "#FEA428", fontSize: 50, marginBottom: 20}}/>
</TouchableOpacity> 

所以takePicture函数会这样做：

const takePicture = async () => {
  setLoading(prevState => !prevState)
  if(cameraRef){
    let photo = await cameraRef.takePictureAsync({quality: 0.5, skipProcessing: true, fixOrientation: false});
    setLoading(prevState => !prevState)
    setPhotoAbove(photo)

  }
  
}

setLoading 更改“isLoading”属性，该属性表示 ActivityIndi​​cator 是否可见。但是，在第一个 setLoading(prevState => !prevState) 之后，永远不会执行以下代码。我在这里遗漏了什么吗？

编辑：我发布了一个带有代码的 Expo Snack 用于测试目的。在 Web 中该问题不可见，但例如，如果您在 Android 上运行它就会出现。

https://snack.expo.io/@avradev/0a8a01

Tks.

Answer 1

你应该像这样在你的 await 方法调用之后移动你的第二个 setLoading：

const takePicture = async () => {
  setLoading(prevState => !prevState)
  if(cameraRef){
    let photo = await cameraRef.takePictureAsync({quality: 0.5, skipProcessing: true, fixOrientation: false});

    setLoading(prevState => !prevState);

    setPhotoAbove(photo);
  }
 
}