我正在尝试在此帖子之后设置一个React Native应用程序,然后移植到ES6。这是主页代码:
"use strict";
import React, { Component } from 'react';
import Camera from 'react-native-camera';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableHighlight,
} from 'react-native';
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {cameraType: Camera.constants.Type.back};
}
render() {
return (
<Camera
ref="cam"
style={styles.container}
type={this.state.cameraType}>
<View style={styles.buttonBar}>
<TouchableHighlight style={styles.button} onPress={this._switchCamera.bind(this)}>
<Text style={styles.buttonText}>Flip</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this._takePicture.bind(this)}>
<Text style={styles.buttonText}>Take</Text>
</TouchableHighlight>
</View>
</Camera>
);
}
_switchCamera: () => {
var state = this.state;
console.log(this.state);
state.cameraType = state.cameraType === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back;
this.setState(state);
}
_takePicture: () => {
console.log(this.refs);
this.refs.cam.capture(function(err, data) {
console.log(err, data);
});
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent",
},
buttonBar: {
flexDirection: "row",
position: "absolute",
bottom: 25,
right: 0,
left: 0,
justifyContent: "center"
},
button: {
padding: 10,
color: "#FFFFFF",
borderWidth: 1,
borderColor: "#FFFFFF",
margin: 5
},
buttonText: {
color: "#FFFFFF"
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
我遇到了一个奇怪的错误,说两个state.cameraType
都是未定义的,并且this.refs
不确定。我有一个预感,即某些东西没有受到束缚,我的this
也没有指向正确的事情,但是我尝试使用箭头功能并明确绑定。请参阅下面的评论。无论如何,我不确定为什么要采取任何行动,有什么想法吗?
与这篇文章非常相似,除了我尝试了提出的解决方案,所以我觉得还有其他问题是缺少的,或者我在做错了。
编辑:是否有理由被投票?我不清楚某件事:o
事实证明,手动绑定是必需的,只需重新加载应用程序即可。我没有启用热量交换。另外,箭头功能也应起作用。
要指出的另一件事,对于iOS 10及以上,您必须在Info.plist
文件,Privacy - Camera Usage Description
和Privacy - Photo Library Usage
中设置2件事。它可以是任何字符串值。