Reactjs 使用lightbox制作图像弹出窗口

使用react native lightbox时，图像会在屏幕左侧弹出，但大小与图像组件中定义的大小相同

我希望图像以比以前更大的尺寸出现在屏幕中央

这是我的密码：

 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>

返回(
此.放大图像（图像）}>
{/*this.enlargeImage（图像）}>*/}
{/*  */}

按下图像时，我希望在屏幕中央以新的大小返回图像：

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

style={{margin:5，width:width/3-17，height:110}

您可以使用Lightbox（）的

renderContent

道具，并执行类似操作：

<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>

{
返回(
)
}}>

我希望这能帮助别人