Экспо Камера записьАсинхронное обещание не разрешается

Question

Я начинаю разрабатывать мобильное приложение с expo /act native, но у меня возникают некоторые проблемы с обработкой объекта камеры:

У меня есть объект камеры, который я начинаю записывать (recordAsync) в componentDidMount, и яостановите это (stopRecording) в componentWillUnmount.однако обещание никогда не разрешается (ни то, ни другое, catch, наконец не называются)

я что-то не так делаю?вот код:

import { Camera, Permissions } from 'expo';

import React from 'react';


export default class CameraReaction extends React.Component {
  constructor(props){
    super(props)
    this.takeFilm = this.takeFilm.bind(this)       
    this.isFilming=false
    this.cameraScreenContent = this.renderCamera()
  }

  componentDidMount(){
    if (this.props.shouldrecording && !this.isFilming ){
      this.takeFilm()
    }
  }
  componentWillUnmount(){
    this.camera.stopRecording()
  }

  saveMediaFile = async video => {
    console.log("=======saveMediaFile======="); 
  }

  renderCamera = () => {
    let self = this
    return (
      <View style={{ flex: 1 }}>
        <Camera
          ref={ref => {self.camera=ref}}
          style={styles.camera}
          type='front'
          whiteBalance='off'
          ratio='4:3'
          autoFocus='off'
          >
        </Camera>
      </View>
    );
  }

  takeFilm(){
    let self = this
    try{
      self.camera.recordAsync()
      .then(data => {
        self.saveMediaFile(data),
        self.isFilming=false
      })
      .catch(error => {console.log(error)})
      this.isFilming = true
    }
    catch(e){      
      this.isFilming = false      
    }            
  };

  render() {    
    return <View style={styles.container}>{this.cameraScreenContent}</View>;
  }

}

кто-нибудь знает, что я делаю неправильно?

заранее спасибо

Answer 1

Я наконец понял, что мы не можем начать запись напрямую, когда компонент визуализируется.Под «непосредственно» я имею в виду без каких-либо дальнейших действий со стороны пользователя.Если я делаю это в два этапа (например, ожидая, когда пользователь где-то нажмет), если работает отлично.Но я не вижу никакой ссылки на это поведение / ограничение в документации.

Рабочий код ниже:

import React from 'react';
import { StyleSheet, Text, View , TouchableOpacity} from 'react-native';
import { Camera, Permissions} from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props)    
    this.camera=undefined
    this.state = {permissionsGranted:false,bcolor:'red'}
    this.takeFilm = this.takeFilm.bind(this)
  }

  async componentWillMount() {    
    let cameraResponse = await Permissions.askAsync(Permissions.CAMERA)
    if (cameraResponse.status == 'granted'){
      let audioResponse = await Permissions.askAsync(Permissions.AUDIO_RECORDING);
      if (audioResponse.status == 'granted'){
        this.setState({ permissionsGranted: true });
      }
    }                  
  }

  takeFilm(){    
    let self = this;
    if (this.camera){
      this.camera.recordAsync().then(data => self.setState({bcolor:'green'}))
    }    
  }

  render() {    
    if (!this.state.permissionsGranted){
      return <View><Text>Camera permissions not granted</Text></View>
    } else {
      return (
        <View style={{flex: 1}}>
          <View style={{ flex: 1 }}>
            <Camera ref={ref => this.camera = ref} style={{flex: 0.3}} ></Camera>
          </View>
          <TouchableOpacity style={{backgroundColor:this.state.bcolor, flex:0.3}} onPress={() => {

            if(this.state.cameraIsRecording){
              this.setState({cameraIsRecording:false})
              this.camera.stopRecording();
            }
            else{
              this.setState({cameraIsRecording:true})
              this.takeFilm();
            }
          }} />
        </View>)
    }
  }
}