Блог

Я разрабатываю приложение React Native и хочу показывать компонент ActivityIndicator, пока камера Expo обрабатывает изображение.

 <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», в котором указывается, будет ли ActivityIndicator видимым или нет. Однако после первого setLoading(prevState => !prevState) следующего кода никогда не выполняется. Я что-то здесь упускаю?

РЕДАКТИРОВАТЬ: я публикую презентацию Expo с кодом для целей тестирования. В Интернете проблема не видна, но, например, если вы запустите ее на Android, она будет.

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

Tks.

Вы должны переместить свою вторую setLoading сразу после вызова метода await следующим образом:

 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);
  }
 
}