前言
最近在學習rn，好多知識都懶得寫，趁今天有空，來一發(fā)吧，modal控件的一個小demo；下面話不多說了，來一起看看詳細的介紹吧。
參考文章地址：http://reactnative.cn/docs/0.27/modal.html#content
modal組件可以用來覆蓋包含react native根視圖的原生視圖（如uiviewcontroller，activity）。
在嵌入react native的混合應(yīng)用中可以使用modal。modal可以使你應(yīng)用中rn編寫的那部分內(nèi)容覆蓋在原生視圖上顯示。
下面是代碼：
|
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 { // 構(gòu)造函數(shù) constructor(props) { super(props); this.state = { show:false, }; } // 加載完成 componentdidmount(){ // } // view卸載 componentwillunmount(){ // } // 自定義方法區(qū)域 // your method _leftbuttonclick() { } _rightbuttonclick() { // console.log('右側(cè)按鈕點擊了'); 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 多行了超出一行了會怎么顯示，就像這樣顯示了很多內(nèi)容該怎么顯示，看看效果 </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', }, // 內(nèi)容 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，充當導航條，你可以將其換成一個按鈕就行了；
效果如圖：
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對服務(wù)器之家的支持。
原文鏈接：http://blog.csdn.net/syg90178aw/article/details/51647262
