react-native-modalbox的使用

Posted 2020-10-06 木子飞

记录这个组件的主要原因就是感觉这个组件比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的开启关闭，使用起来也很方便。