带Expo Camera的takePictureAsync时的ActivityIndi​​cator

问题描述

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

git clone

因此，功能 takePicture 可以执行以下操作：

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

setLoading更改“ isLoading”道具，该道具表示ActivityIndi​​cator是否可见。但是，在第一个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) } } 之后，将不再执行以下代码。我在这里想念东西吗？

编辑：我正在发布带有代码的Expo Snack，以进行测试。在Web中，该问题不明显，但是例如，如果您在Android上运行它，它将显示出来。

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

Tks。

解决方法

您应该在这样的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);
  }
 
}