首页 > 其他 > 详细

react-native-modalbox的使用

时间:2017-09-11 18:54:54      阅读:930      评论:0      收藏:0      [点我收藏+]

记录这个组件的主要原因就是感觉这个组件比React Native 官方提供的Modal组件相比使用起来

更舒服,有动人的弹出动画,渲染的背景比Modal要好,它是那种淡入淡出的,而Modal是

生硬的推进的。

npm 网址

这里面提供了好多属性,现在挑一些介绍一下

backdropPressToClose:在背景处点击是否关闭modal,默认是关闭

backdropOpacity:背景颜色透明度,默认是0.5

backdropColor:背景颜色,因为这个背景颜色有默认透明度的,感觉使用很方便,默认black

属性就简单介绍这些,下面看一下使用方法

import Modal from react-native-modalbox;
opencalendarstartmodal(){
   this.refs.calendarstart.open();
  }

  selectstartday(day){
    this.refs.calendarstart.close();
    this.setState({
     rentstartday:day.dateString,
    })
  }

<Modal
backdropPressToClose={true}
style={{ backgroundColor:"transparent",height: 360 ,
position:"absolute",top:(deviceheight-360)/2,left:0,
width:devicewidth, }}
ref={"calendarstart"}>
<CalendarofStart callback={(day)=>this.selectstartday(day)}/>
</Modal>
<TouchableOpacity  style={{justifyContent:"center",alignItems:"center"}} onPress={()=>this.opencalendarstartmodal()}>
            <Text  style={{fontSize:12.5,
            color:this.state.rentstartday!="2017-09-10"?"#444444":"#b0b0b0"}}>{this.state.rentstartday}</Text>
            </TouchableOpacity>
这里使用ref calendarstart控制Modal的开启关闭,使用起来也很方便。

 

react-native-modalbox的使用

原文:http://www.cnblogs.com/lgp142332/p/7506362.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!