在react-native中的图像视图上从相机中获取最近点击的图像
发布时间:2020-12-15 16:19:14 所属栏目:百科 来源:网络整理
导读:我正在我的反应原生应用程序中实现相机.我想在点击后在同一屏幕上的小图像视图中显示最近拍摄的图像.但我没有得到如何访问最近点击的图像.每当通过手机点击任何新图像时,它都会被赋予一个默认的随机名称,我如何在图像视图的源代码中引用它?请告诉我一些方法
我正在我的反应原生应用程序中实现相机.我想在点击后在同一屏幕上的小图像视图中显示最近拍摄的图像.但我没有得到如何访问最近点击的图像.每当通过手机点击任何新图像时,它都会被赋予一个默认的随机名称,我如何在图像视图的源代码中引用它?请告诉我一些方法.我的代码是
class Incident extends Component { constructor(props) { super(props) this.state= {path:"",show:false,video:Camera.constants.CaptureMode.video,camera:Camera.constants.CaptureMode.camera} } render() { return ( <View style={styles.container}> <View style={{flex:72}}> <Camera ref={(cam) => { this.camera = cam; }} style={styles.preview} aspect={Camera.constants.Aspect.fill} captureMode={this.state.camera}> </Camera> </View> <View style={{flex:8,opacity:0.5,backgroundColor:'black'}}> {()=>this.showClickedImage()} </View> <View style={{flex:10,flexDirection:'row',justifyContent:'space-between',backgroundColor:'#f3396b'}}> <TouchableOpacity style={{flex:33,flexDirection:'column',alignItems: 'center',paddingTop:10}}> <Image style={styles.icon} source={require('./Images/menu.png')}/> <Text>Home</Text> </TouchableOpacity> <TouchableOpacity style={{flex:34,height:70,borderColor:'#dd1e52',borderWidth:1,paddingTop:5}} onPress={()=>this.takePicture()}> <Image style={{width:50,height:50}} source={require('./Images/capture.png')}/> </TouchableOpacity> <TouchableOpacity style={{flex:33,paddingTop:10}}> <Image style={styles.icon} source={require('./Images/profile.png')}/> <Text>Profile</Text> </TouchableOpacity> </View> </View> ); } showClickedImage() { return <View style={{flex:1,height:40,width:40,borderColor:'black'}}> <Image style={{width:40,height:40}} source= {{uri: this.state.path}}/> </View> } takePicture() { this.camera.capture() .then((data) =>{console.log(data.path),this.setState({show:true}),this.setState({path:data.path})}) .catch(err => console.error(err)); } } 解决方法
camera.capture()返回捕获图像的路径.用它来显示在Image组件中.
<Image source={{uri: data.path}} style={{width: 100,height: 100}} /> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |