代碼筆記 ---Modal模塊的使用（1）

開發中常常會用到Modal模塊，寫這個筆記不是說難，就是以爲繁瑣，把本身使用的Modal模塊框架記錄在此方便之後借鑑

constructor(props){
    super(props);

    this.state={
      visible:false,
      transparent: true,
    }
 
  }

 

_setModalVisible(visible) {
    this.setState({visible: visible});
  }

 

主要是渲染的這個Modal值得借鑑

_renderModal(){
   var modalBackgroundStyle = {
     backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
   };
   var innerContainerTransparentStyle = this.state.transparent
     ? {backgroundColor: '#ffffff', padding: 20}
     : null;
   var activeButtonStyle = {
     backgroundColor: '#dddddd'
   };

   return(
    <Modal visible={this.state.visible}
            transparent ={this.state.transparent}
            onRequestClose={() => {this._setModalVisible(true)}} >
     <View style={[styles.container, modalBackgroundStyle]}>
      <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
       <View style={{width:100,height:50,justifyContent:'flex-start',alignItems:'center',}}>
        <Text style={{fontSize:20}}>這是一個Modal</Text>
       </View> 
      </View>
     </View>
    </Modal>
    );

  }

 

render(){
   return(
      <View>
         <TouchableOpacity onPress={() =>this._setModalVisible(true) }>
         <Text>主要渲染的內容</Text>
         </TouchableOpacity>
         {
            this.state.visible ? this._renderModal():null
          }
      </View>  
    )  
}        

 

 

const styles = StyleSheet.create({

   
  container: {
    flex:1,
    justifyContent:'center',
    padding: 40,
  },
  innerContainer: {

   borderRadius: 10,

   alignItems: 'center',
   justifyContent:'center',
   flexDirection:'column'
  },
});