React-native 使用灯箱弹出图像

Question

When using react native lightbox, the image pops up in the left side of the screen, but with the same size as defined in the image component.

I want the image to pop up in the center of the screen with a bigger size than before.

Here is my code:

 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button
      title="Pick an image from camera roll"
      onPress={this._pickImage}
    />


    <Lightbox onPress={() => this.enlargeImage(image)} >
      {/*    <TouchableOpacity onPress={() => this.enlargeImage(image)}> */}
      <Image
        source={{ uri: image }}
        style={{ width: 200, height: 200 }}
      />
      {/* </TouchableOpacity> */}
    </Lightbox>

When i press the image i want to return the image in new size in the center of the screen:

 enlargeImage = (image) => {
  return (
  <Lightbox>
    <Image
      source={{ uri: image }}
      style={{ width: 500, height: 500 }}
      resizeMode='center'
    />
  </Lightbox>
)
}

Answer 1

You can use the renderContent props of Lightbox ( docs ). And doing something like that:

<Lightbox renderContent={()=> {
  return(
    <Image
     source={require('./photo.png')}
     style={{ width: 1000, height: 1000 }}
     resizeMode='center'
    />
  )
}}>
 <Image
   source={require('./photo.png')}
   style={{ width: 500, height: 500 }}
   resizeMode='center'
 />
</Lightbox>

I hope this will help somebody.

Answer 2

I think you should wrap the Lightbox into a Button . When you then size the container around it instead of the lightbox.

<TouchableOpacity> style={{ margin: 5, width: width / 3 - 17, height: 110 }}
   <Lightbox>
       <Image
         source={{ uri: image }}
         style={{ width: 500, height: 500 }}
         resizeMode='center'
       />
   </Lightbox>
</TouchableOpacity>