#reactjs #react-native #react-native-android #react-native-camera #react-native-video
#reactjs #react-native #react-native-camera #react-native-video
Вопрос:
Я хочу реализовать функцию записи видео с использованием 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, вообще не вызывается.
Любая помощь была бы отличной, спасибо
Комментарии:
1. Нет, это все тот же @Riddhi
Ответ №1:
Я все еще не мог понять, что пошло не так с приведенным выше кодом, но, используя react-native-beautiful-video-recorder в качестве пакета, я наконец нашел приложение, которое работает в соответствии с моими требованиями. Если кто-нибудь столкнется с такой же проблемой, лучше использовать react-native-beautiful-video-recorder.
Ответ №2:
Попробуйте нажать со стрелкой
<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)
}
Комментарии:
1. Нет, привязка этого к функции arrow, похоже, не работает
2. Я обновил свой ответ, вы можете привязать функции и методы в конструкторе
3. все то же поведение
Ответ №3:
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>
);
Комментарии:
1. если бы вы могли отправить рабочую версию этого только для справки, это было бы здорово, поскольку у меня это не работает, и я все еще не уверен, почему
Ответ №4:
Проблема, с которой вы имеете дело, намного проще, чем вы думаете
ваше начальное состояние — это
this.state = {
recording: false,
processing: true,
};
таким образом, кнопка отображает, если обработка и запись являются ложными,
начальная кнопка запускает видео,
итак, ваше начальное состояние должно быть таким
this.state = {
recording: false,
processing: false,
};