android - Expo Camera recordAsync promise 未解决

Question

我开始使用 expo/react native 开发移动应用程序，但我在处理相机对象时遇到了一些问题:

我有一个相机对象，我在 componentDidMount 开始录制 (recordAsync)，然后在 componentWillUnmount 停止 (stopRecording)。然而， promise 从未得到解决(then，catch no finally 都没有被调用)

我做错了什么吗？这是代码:

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