使用react-native-camera,如何访问已保存的图片?
发布时间:2020-12-15 20:50:30 所属栏目:百科 来源:网络整理
导读:我的目标是使用react-native-camera,如果已拍摄照片,只需在同一屏幕上显示图片.我正在尝试将图片源保存为“imageURI”.如果它存在,我想展示它,如果还没有拍摄照片,只显示没有图像的文字.我有相机工作,因为我可以跟踪应用程序将图片保存到磁盘.遇到以下问题:
|
我的目标是使用react-native-camera,如果已拍摄照片,只需在同一屏幕上显示图片.我正在尝试将图片源保存为“imageURI”.如果它存在,我想展示它,如果还没有拍摄照片,只显示没有图像的文字.我有相机工作,因为我可以跟踪应用程序将图片保存到磁盘.遇到以下问题:
>当我拍照时,如何将捕获函数数据分配给变量,我可以稍后调用(imageURI). import Camera from 'react-native-camera';
export default class camerahere extends Component {
_takePicture () {
this.camera.capture((err,data) => {
if (err) return;
imageURI = data;
});
}
render() {
if ( typeof imageURI == undefined) {
image = <Text> No Image Yet </Text>
} else {
image = <Image source={{uri: imageURI,isStatic:true}}
style={{width: 100,height: 100}} />
}
return (
<View style={styles.container}>
<Camera
captureTarget={Camera.constants.CaptureTarget.disk}
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
{button}
<TouchableHighlight onPress={this._takePicture.bind(this)}>
<View style={{height:50,width:50,backgroundColor:"pink"}}></View>
</TouchableHighlight>
</Camera>
我找到了自己问题的答案.这是使用的react-native-camera的一个例子.
https://github.com/spencercarli/react-native-snapchat-clone/blob/master/app/routes/Camera.js 在@vinayr回答的另一个早期发布的问题中找到了这个答案.谢谢! 这是第一个链接的代码: import React,{ Component } from 'react';
import {
View,StyleSheet,Dimensions,TouchableHighlight,Image,Text,} from 'react-native';
import Camera from 'react-native-camera';
const styles = StyleSheet.create({
container: {
flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor: '#000',},preview: {
flex: 1,justifyContent: 'flex-end',height: Dimensions.get('window').height,width: Dimensions.get('window').width
},capture: {
width: 70,height: 70,borderRadius: 35,borderWidth: 5,borderColor: '#FFF',marginBottom: 15,cancel: {
position: 'absolute',right: 20,top: 20,backgroundColor: 'transparent',color: '#FFF',fontWeight: '600',fontSize: 17,}
});
class CameraRoute extends Component {
constructor(props) {
super(props);
this.state = {
path: null,};
}
takePicture() {
this.camera.capture()
.then((data) => {
console.log(data);
this.setState({ path: data.path })
})
.catch(err => console.error(err));
}
renderCamera() {
return (
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
captureTarget={Camera.constants.CaptureTarget.disk}
>
<TouchableHighlight
style={styles.capture}
onPress={this.takePicture.bind(this)}
underlayColor="rgba(255,255,0.5)"
>
<View />
</TouchableHighlight>
</Camera>
);
}
renderImage() {
return (
<View>
<Image
source={{ uri: this.state.path }}
style={styles.preview}
/>
<Text
style={styles.cancel}
onPress={() => this.setState({ path: null })}
>Cancel
</Text>
</View>
);
}
render() {
return (
<View style={styles.container}>
{this.state.path ? this.renderImage() : this.renderCamera()}
</View>
);
}
};
export default CameraRoute;
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
