代码笔记 ---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'
  },
});