react-native 图片库浏览插件

'use strict';

importReact, { Component }from'react';

import{

Text,

View,

Dimensions,

ScrollView

}from'react-native';

importGalleryfrom'react-native-gallery';

export default classAppextendsComponent {

constructor(props) {

super(props);

this.state= {

showCommentBox:true,

page:0

}

}

render() {

letcommentBox;

if(this.state.showCommentBox) {

commentBox= (

style={{position:'absolute',left:0,right:0,bottom:0,height:100,backgroundColor:'#00000066',padding:10,alignItems:'center',justifyContent:'center'}}>

What a nice holiday you have!

page: {this.state.page}

);

}

return(

style={{flex:1,backgroundColor:'black'}}

initialPage={1}

pageMargin={10}

images={[

'http://p10.qhimg.com/t019e9cf51692f735be.jpg',

'http://ww2.sinaimg.cn/mw690/714a59a7tw1dxqkkg0cwlj.jpg',

'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg'

]}

onSingleTapConfirmed={() => {

this.toggleCommentBox();

}}

onGalleryStateChanged={(idle) => {

if(!idle) {

this.hideCommentBox();

}

}}

onPageSelected={(page) => {

this.setState({page});

}}

/>

{commentBox}

);

}

toggleCommentBox() {

if(!this.state.showCommentBox) {

this.setState({

showCommentBox:true

});

}else{

this.setState({

showCommentBox:false

});

}

}

hideCommentBox() {

if(this.state.showCommentBox) {

this.setState({

showCommentBox:false

});

}

}

}