当前位置： 移动技术网 > 移动技术>移动开发>IOS > React Native学习教程之Modal控件自定义弹出View详解

React Native学习教程之Modal控件自定义弹出View详解

2019年07月24日  | 移动技术网移动技术  | 我要评论

前言

最近在学习rn，好多知识都懒得写，趁今天有空，来一发吧，modal控件的一个小demo；下面话不多说了，来一起看看详细的介绍吧。

参考文章地址：http://reactnative.cn/docs/0.27/modal.html#content

modal组件可以用来覆盖包含react native根视图的原生视图（如uiviewcontroller，activity）。

在嵌入react native的混合应用中可以使用modal。modal可以使你应用中rn编写的那部分内容覆盖在原生视图上显示。

下面是代码：

// homepage 
// 功能: 该类的作用 
// created by 小广 on 2016-06-12 上午. 
// 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'); 
// 类 
export default class homepage extends component { 
 // 构造函数 
 constructor(props) { 
 super(props); 
 this.state = { 
  show:false, 
 }; 
 } 
 
 // 加载完成 
 componentdidmount(){ 
 // 
 } 
 
 // view卸载 
 componentwillunmount(){ 
 // 
 } 
 
 // 自定义方法区域 
 // your method 
 _leftbuttonclick() { 
 
 } 
 _rightbuttonclick() { 
 // 
 console.log('右侧按钮点击了'); 
 this._setmodalvisible(); 
 } 
 
 // 显示/隐藏 modal 
 _setmodalvisible() { 
 let isshow = this.state.show; 
 this.setstate({ 
  show:!isshow, 
 }); 
 } 
 
 // 绘制view 
 render() { 
  return ( 
  <view style={styles.container}> 
   <navigatorbar 
   title='modal测试' 
   titletextcolor='#f2380a' 
   rightitemtitle='按钮' 
   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}> 
     提示 
    </text> 
    <text style={styles.contenttext}> 
     modal显示的view 多行了超出一行了会怎么显示，就像这样显示了很多内容该怎么显示，看看效果 
    </text> 
    <view style={styles.horizontalline} /> 
    <view style={styles.buttonview}> 
     <touchablehighlight underlaycolor='transparent' 
     style={styles.buttonstyle} 
     onpress={this._setmodalvisible.bind(this)}> 
     <text style={styles.buttontext}> 
      取消 
     </text> 
     </touchablehighlight> 
     <view style={styles.verticalline} /> 
     <touchablehighlight underlaycolor='transparent' 
     style={styles.buttonstyle} 
     onpress={this._setmodalvisible.bind(this)}> 
     <text style={styles.buttontext}> 
      确定 
     </text> 
     </touchablehighlight> 
    </view> 
    </view> 
   </view> 
  </modal> 
  </view> 
  ); 
 } 
 
} 
// modal属性 
// 1.animationtype bool 控制是否带有动画效果 
// 2.onrequestclose platform.os==='android'? proptypes.func.isrequired : proptypes.func 
// 3.onshow function方法 
// 4.transparent bool 控制是否带有透明效果 
// 5.visible bool 控制是否显示 
 
// css样式 
var styles = stylesheet.create({ 
 container:{ 
 flex:1, 
 backgroundcolor: '#ececf0', 
 }, 
 // modal的样式 
 modalstyle: { 
 // backgroundcolor:'#ccc', 
 alignitems: 'center', 
 justifycontent:'center', 
 flex:1, 
 }, 
 // modal上子view的样式 
 subview:{ 
 marginleft:60, 
 marginright:60, 
 backgroundcolor:'#fff', 
 alignself: 'stretch', 
 justifycontent:'center', 
 borderradius: 10, 
 borderwidth: 0.5, 
 bordercolor:'#ccc', 
 }, 
 // 标题 
 titletext:{ 
 margintop:10, 
 marginbottom:5, 
 fontsize:16, 
 fontweight:'bold', 
 textalign:'center', 
 }, 
 // 内容 
 contenttext:{ 
 margin:8, 
 fontsize:14, 
 textalign:'center', 
 }, 
 // 水平的分割线 
 horizontalline:{ 
 margintop:5, 
 height:0.5, 
 backgroundcolor:'#ccc', 
 }, 
 // 按钮 
 buttonview:{ 
 flexdirection: 'row', 
 alignitems: 'center', 
 }, 
 buttonstyle:{ 
 flex:1, 
 height:44, 
 alignitems: 'center', 
 justifycontent:'center', 
 }, 
 // 竖直的分割线 
 verticalline:{ 
 width:0.5, 
 height:44, 
 backgroundcolor:'#ccc', 
 }, 
 buttontext:{ 
 fontsize:16, 
 color:'#3393f2', 
 textalign:'center', 
 }, 
});

注意：navigatorbar是我自定义的一个view，充当导航条，你可以将其换成一个按钮就行了；

效果如图：


总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网