Detailed explanation of modal control custom pop-up view in react native learning tutorial

Time:2021-4-28

preface

Recently in learning RN, a lot of knowledge are lazy to write, take advantage of today’s free, to send it, modal control a small demo; Let’s take a look at the detailed introduction.

Reference article address: http://reactnative.cn/docs/0.27/modal.html#content

Modal components can be used to override native views (such as uiviewcontroller, activity) that contain react native root views.

Modal can be used in hybrid applications embedded with react native. Modal enables you to overlay the part of your application written by RN on the native view.

Here’s the code:

// HomePage 
//Function: the function of this class 
//Created by Xiaoguang on the morning of June 12, 2016 
// Copyright  ©  2016 all rights reserved 
 
'use strict'; 
import React, { Component } from 'react'; 
import { 
 View, 
 Text, 
 Image, 
 Modal, 
 Navigator, 
 TextInput, 
 ScrollView, 
 StyleSheet, 
 Dimensions, 
 TouchableHighlight, 
} from 'react-native'; 
import NavigatorBar from '../tools/navigator' 
var { width, height, scale } = Dimensions.get('window'); 
//Class 
export default class HomePage extends Component { 
 //Constructors 
 constructor(props) { 
 super(props); 
 this.state = { 
  show:false, 
 }; 
 } 
 
 //Loading complete 
 componentDidMount(){ 
 // 
 } 
 
 //View uninstall 
 componentWillUnmount(){ 
 // 
 } 
 
 //Custom method area 
 // your method 
 _leftButtonClick() { 
 
 } 
 _rightButtonClick() { 
 // 
 Console.log ('right button is clicked '); 
 this._setModalVisible(); 
 } 
 
 //Show / hide modal 
 _setModalVisible() { 
 let isShow = this.state.show; 
 this.setState({ 
  show:!isShow, 
 }); 
 } 
 
 //Draw view 
 render() { 
  return ( 
  <View style={styles.container}> 
   <NavigatorBar 
   Title: 'modal test' 
   titleTextColor='#F2380A' 
   Rightitemtitle ='button ' 
   rightTextColor='#F2380A' 
   rightItemFunc={this._rightButtonClick.bind(this)} /> 
   <Modal 
   animationType='slide' 
   transparent={true} 
   visible={this.state.show} 
   onShow={() => {}} 
   onRequestClose={() => {}} > 
   <View style={styles.modalStyle}> 
    <View style={styles.subView}> 
    <Text style={styles.titleText}> 
     Tips 
    </Text> 
    <Text style={styles.contentText}> 
     The view displayed by modal has more than one line. How will it be displayed if it exceeds one line? Just like this, it shows how to display a lot of content. Let's see the effect 
    </Text> 
    <View style={styles.horizontalLine} /> 
    <View style={styles.buttonView}> 
     <TouchableHighlight underlayColor='transparent' 
     style={styles.buttonStyle} 
     onPress={this._setModalVisible.bind(this)}> 
     <Text style={styles.buttonText}> 
      cancel 
     </Text> 
     </TouchableHighlight> 
     <View style={styles.verticalLine} /> 
     <TouchableHighlight underlayColor='transparent' 
     style={styles.buttonStyle} 
     onPress={this._setModalVisible.bind(this)}> 
     <Text style={styles.buttonText}> 
      determine 
     </Text> 
     </TouchableHighlight> 
    </View> 
    </View> 
   </View> 
  </Modal> 
  </View> 
  ); 
 } 
 
} 
//Modal property 
//1. Animation type bool controls whether it has animation effect 
// 2.onRequestClose Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func 
//3. Onshow function method 
//4. Transparent bool controls whether it has a transparent effect 
//5. Visible bool controls whether to display 
 
//CSS Style 
var styles = StyleSheet.create({ 
 container:{ 
 flex:1, 
 backgroundColor: '#ECECF0', 
 }, 
 //The style of modal 
 modalStyle: { 
 // backgroundColor:'#ccc', 
 alignItems: 'center', 
 justifyContent:'center', 
 flex:1, 
 }, 
 //The style of subview on Modal 
 subView:{ 
 marginLeft:60, 
 marginRight:60, 
 backgroundColor:'#fff', 
 alignSelf: 'stretch', 
 justifyContent:'center', 
 borderRadius: 10, 
 borderWidth: 0.5, 
 borderColor:'#ccc', 
 }, 
 //Title 
 titleText:{ 
 marginTop:10, 
 marginBottom:5, 
 fontSize:16, 
 fontWeight:'bold', 
 textAlign:'center', 
 }, 
 //Content 
 contentText:{ 
 margin:8, 
 fontSize:14, 
 textAlign:'center', 
 }, 
 //Horizontal split line 
 horizontalLine:{ 
 marginTop:5, 
 height:0.5, 
 backgroundColor:'#ccc', 
 }, 
 //Button 
 buttonView:{ 
 flexDirection: 'row', 
 alignItems: 'center', 
 }, 
 buttonStyle:{ 
 flex:1, 
 height:44, 
 alignItems: 'center', 
 justifyContent:'center', 
 }, 
 //Vertical dividing line 
 verticalLine:{ 
 width:0.5, 
 height:44, 
 backgroundColor:'#ccc', 
 }, 
 buttonText:{ 
 fontSize:16, 
 color:'#3393F2', 
 textAlign:'center', 
 }, 
});

be careful:Navigator bar is a view defined by me, which acts as a navigation bar. You can change it into a button;

The effect is as follows:

summary

The above is the whole content of this article, I hope the content of this article has a certain reference value for your study or work, if you have any questions, you can leave a message to exchange, thank you for your support for developer.

Recommended Today

Looking for frustration 1.0

I believe you have a basic understanding of trust in yesterday’s article. Today we will give a complete introduction to trust. Why choose rust It’s a language that gives everyone the ability to build reliable and efficient software. You can’t write unsafe code here (unsafe block is not in the scope of discussion). Most of […]