世博会,ReactNative,相机不翻转
Expo, ReactNative, Camera does not Flip
我正在关注 Expo Docs 使用相机,在 onPress
我可以看到类型状态从 0
更改为 1
并且副-按下翻盖时相反,但相机始终在背面。
这是我的CameraComponent
代码
export default class CameraComponent extends Component {
state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back,
};
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
render() {
console.log('camera ==>', this.state.type);
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }}>
<View style={{flex: 1,backgroundColor: 'transparent',flexDirection:'row',}}/>
<View style={{flexDirection: 'row',justifyContent: 'space-between',paddingHorizontal: 10, marginBottom: 15,alignItems: 'flex-end',}}>
<Icon name="md-reverse-camera"
onPress={() => { console.log('flip pressed');
this.setState({
type:
this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
});
}}
/>
</View>
</Camera>
</View>
);
}
}
您将 Camera type
道具放在 Icon 上,但它是一个需要转到 Camera
组件的道具。
我正在关注 Expo Docs 使用相机,在 onPress
我可以看到类型状态从 0
更改为 1
并且副-按下翻盖时相反,但相机始终在背面。
这是我的CameraComponent
代码
export default class CameraComponent extends Component {
state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back,
};
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
render() {
console.log('camera ==>', this.state.type);
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }}>
<View style={{flex: 1,backgroundColor: 'transparent',flexDirection:'row',}}/>
<View style={{flexDirection: 'row',justifyContent: 'space-between',paddingHorizontal: 10, marginBottom: 15,alignItems: 'flex-end',}}>
<Icon name="md-reverse-camera"
onPress={() => { console.log('flip pressed');
this.setState({
type:
this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
});
}}
/>
</View>
</Camera>
</View>
);
}
}
您将 Camera type
道具放在 Icon 上,但它是一个需要转到 Camera
组件的道具。