react-native-modal（react native自定义组件）

前言

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

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

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

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

下面是代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 // 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', }, });