获取最近点击的图像从图像视图上的反应 - 本地

我在我的反应本机应用程序中实现相机。点击后，我想在同一屏幕上的小图像视图中显示最近拍摄的图像。但我没有得到如何访问最近点击的图像。每当通过手机点击任何新图像时，都会给出一个默认的随机名称，我如何在图像视图的源代码中引用它？请给我建议一些方法来实现这一点。我的代码是获取最近点击的图像从图像视图上的反应 - 本地

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,flexDirection:'column', height:70,alignItems: 'center',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,flexDirection:'column', alignItems: 'center',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, borderWidth:1,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)); 
      } 
      }

来源

2016-11-14 Rashmi Maulekhi

当图像被存储在点击它被赋予缺省的随机唯一的名字，在我的手机很类似IMG_20161114_1233647，在其他设备也可以是不同的。我如何为其路径编写通用代码？ –

您需要将先前单击的图像文件名存储在某个列表中才能访问它们。 –

camera.capture()返回捕获图像的路径。用它来显示Image组件。

<Image source={{uri: data.path}} style={{width: 100, height: 100}} />

来源

2016-11-14 06:58:48 vinayr

感谢您的快速响应。我使用相同的，路径显示在控制台上，但我不明白为什么我的图像视图没有得到图像。我通过添加代码@vinayr来编辑上面的帖子。 –

@Rashhh这个例子可以帮助你https://github.com/spencercarli/react-native-sidual-clone/blob/master/app/routes/Camera.js – vinayr

获取最近点击的图像从图像视图上的反应 - 本地

回答

相关问题