react-native-modalbox的使用

記錄這個組件的主要原因就是感覺這個組件比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的開啟關閉，使用起來也很方便。