Блог

Я хочу реализовать функцию записи видео с использованием react native video, но функция start recording не дает никакого ответа, я даже утешился, чтобы посмотреть, вызывается ли она, на самом деле это не так, я не могу понять, что я сделал не так.

Ниже приведен точный код, который я написал

 import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';
import {RNCamera} from 'react-native-camera';

export default class Shoot extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recording: false,
      processing: true,
    };
  }
  async startRecording() {
    this.setState({recording: true});
    // default to mp4 for android as codec is not set
    const {uri, codec = 'mp4'} = await this.camera.recordAsync();
  }
  stopRecording = () => {
    this.camera.stopRecording();
  };
  render() {
    const {recording, processing} = this.state;

    let button = (
      <TouchableOpacity
        onPress={this.startRecording.bind(this)}
        style={styles.capture}>
        {console.log('aaa')}
        <Text style={{fontSize: 14}}> RECORD </Text>
      </TouchableOpacity>
    );
    if (recording) {
      button = (
        <TouchableOpacity
          onPress={this.stopRecording.bind(this)}
          style={styles.capture}>
          <Text style={{fontSize: 14}}> STOP </Text>
        </TouchableOpacity>
      );
    }
    if (processing) {
      button = (
        <View style={styles.capture}>
          <ActivityIndicator animating size={18} />
        </View>
      );
    }
    return (
      <View style={styles.container}>
        <RNCamera
          ref={(ref) => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={
            'We need your permission to use your camera phone'
          }
        />
        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
          {button}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#e75480',
    borderRadius: 40,
    width: 80,
    height: 80,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});
  

итак, кнопка touchability onpress, которая является startRecording, вообще не вызывается.
Любая помощь была бы отличной, спасибо

Я все еще не мог понять, что пошло не так с приведенным выше кодом, но, используя react-native-beautiful-video-recorder в качестве пакета, я наконец нашел приложение, которое работает в соответствии с моими требованиями. Если кто-нибудь столкнется с такой же проблемой, лучше использовать react-native-beautiful-video-recorder.

Попробуйте нажать со стрелкой

   <TouchableOpacity
    onPress={() => this.startRecording()}
    style={styles.capture}>
    {console.log('aaa')}
    <Text style={{fontSize: 14}}> RECORD </Text>
  </TouchableOpacity>
  

И свяжите это

 constructor(props) {
    super(props);
    this.state = {
      recording: false,
      processing: true,
    };

    this.startRecording = this.startRecording.bind(this)
}
  

 render() {
  const {recording, processing} = this.state;
  let button;

  if (recording) {
    button = (
    <TouchableOpacity
      onPress={this.stopRecording.bind(this)}
      style={styles.capture}>
      <Text style={{fontSize: 14}}> STOP </Text>
    </TouchableOpacity>
  );
}
else if (processing) {
  button = (
    <View style={styles.capture}>
      <ActivityIndicator animating size={18} />
    </View>
  );
}
else {
 button = (
  <TouchableOpacity
    onPress={this.startRecording.bind(this)}
    style={styles.capture}>
    {console.log('aaa')}
    <Text style={{fontSize: 14}}> RECORD </Text>
  </TouchableOpacity>
);
  

Проблема, с которой вы имеете дело, намного проще, чем вы думаете

ваше начальное состояние — это

 this.state = {
      recording: false,
      processing: true,
    };
  

таким образом, кнопка отображает, если обработка и запись являются ложными,
начальная кнопка запускает видео,
итак, ваше начальное состояние должно быть таким

 this.state = {
      recording: false,
      processing: false,
    };