React Native学习之Modal控件自定义弹出View

http://blog.csdn.net/syg90178aw/article/details/51647262

RN学习，好多知识都懒得写，趁今天有空，来一发吧，Modal控件的一个小demo；参考文章地址：http://reactnative.cn/docs/0.27/modal.html#content

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
下面是代码：

[html]  view plain  copy

 

1. //  HomePage  
2. //  功能: 该类的作用  
3. //  Created by 小广 on  2016-06-12 上午.  
4. //  Copyright © 2016年  All rights reserved.  
5.   
6. 'use strict';  
7. import React, { Component } from 'react';  
8. import {  
9.   View,  
10.   Text,  
11.   Image,  
12.   Modal,  
13.   Navigator,  
14.   TextInput,  
15.   ScrollView,  
16.   StyleSheet,  
17.   Dimensions,  
18.   TouchableHighlight,  
19. } from 'react-native';  
20. import NavigatorBar from '../tools/navigator'  
21. var { width, height, scale } = Dimensions.get('window');  
22. // 类  
23. export default class HomePage extends Component {  
24.   // 构造函数  
25.   constructor(props) {  
26.     super(props);  
27.     this.state = {  
28.       show:false,  
29.     };  
30.   }  
31.   
32.   // 加载完成  
33.   componentDidMount(){  
34.     //  
35.   }  
36.   
37.   // view卸载  
38.   componentWillUnmount(){  
39.     //  
40.   }  
41.   
42.   // 自定义方法区域  
43.   // your method  
44.   _leftButtonClick() {  
45.   
46.   }  
47.   _rightButtonClick() {  
48.     //  
49.     console.log('右侧按钮点击了');  
50.     this._setModalVisible();  
51.   }  
52.   
53.   // 显示/隐藏 modal  
54.   _setModalVisible() {  
55.     let isShow = this.state.show;  
56.     this.setState({  
57.       show:!isShow,  
58.     });  
59.   }  
60.   
61.   // 绘制View  
62.   render() {  
63.      return (  
64.        <View style={styles.container}>  
65.          <NavigatorBar  
66.            title='Modal测试'  
67.            titleTextColor='#F2380A'  
68.            rightItemTitle='按钮'  
69.            rightTextColor='#F2380A'  
70.            rightItemFunc={this._rightButtonClick.bind(this)} />  
71.          <Modal  
72.            animationType='slide'  
73.            transparent={true}  
74.            visible={this.state.show}  
75.            onShow={() => {}}  
76.            onRequestClose={() => {}} >  
77.            <View style={styles.modalStyle}>  
78.              <View style={styles.subView}>  
79.                <Text style={styles.titleText}>  
80.                  提示  
81.                </Text>  
82.                <Text style={styles.contentText}>  
83.                  Modal显示的View 多行了超出一行了会怎么显示，就像这样显示了很多内容该怎么显示，看看效果  
84.                </Text>  
85.                <View style={styles.horizontalLine} />  
86.                <View style={styles.buttonView}>  
87.                  <TouchableHighlight underlayColor='transparent'  
88.                    style={styles.buttonStyle}  
89.                    onPress={this._setModalVisible.bind(this)}>  
90.                    <Text style={styles.buttonText}>  
91.                      取消  
92.                    </Text>  
93.                  </TouchableHighlight>  
94.                  <View style={styles.verticalLine} />  
95.                  <TouchableHighlight underlayColor='transparent'  
96.                    style={styles.buttonStyle}  
97.                    onPress={this._setModalVisible.bind(this)}>  
98.                    <Text style={styles.buttonText}>  
99.                      确定  
100.                    </Text>  
101.                  </TouchableHighlight>  
102.                </View>  
103.              </View>  
104.            </View>  
105.         </Modal>  
106.        </View>  
107.      );  
108.   }  
109.   
110. }  
111. // Modal属性  
112. // 1.animationType bool  控制是否带有动画效果  
113. // 2.onRequestClose  Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func  
114. // 3.onShow function方法  
115. // 4.transparent bool  控制是否带有透明效果  
116. // 5.visible  bool 控制是否显示  
117.   
118. // css样式  
119. var styles = StyleSheet.create({  
120.   container:{  
121.     flex:1,  
122.     backgroundColor: '#ECECF0',  
123.   },  
124.   // modal的样式  
125.   modalStyle: {  
126.     // backgroundColor:'#ccc',  
127.     alignItems: 'center',  
128.     justifyContent:'center',  
129.     flex:1,  
130.   },  
131.   // modal上子View的样式  
132.   subView:{  
133.     marginLeft:60,  
134.     marginRight:60,  
135.     backgroundColor:'#fff',  
136.     alignSelf: 'stretch',  
137.     justifyContent:'center',  
138.     borderRadius: 10,  
139.     borderWidth: 0.5,  
140.     borderColor:'#ccc',  
141.   },  
142.   // 标题  
143.   titleText:{  
144.     marginTop:10,  
145.     marginBottom:5,  
146.     fontSize:16,  
147.     fontWeight:'bold',  
148.     textAlign:'center',  
149.   },  
150.   // 内容  
151.   contentText:{  
152.     margin:8,  
153.     fontSize:14,  
154.     textAlign:'center',  
155.   },  
156.   // 水平的分割线  
157.   horizontalLine:{  
158.     marginTop:5,  
159.     height:0.5,  
160.     backgroundColor:'#ccc',  
161.   },  
162.   // 按钮  
163.   buttonView:{  
164.     flexDirection: 'row',  
165.     alignItems: 'center',  
166.   },  
167.   buttonStyle:{  
168.     flex:1,  
169.     height:44,  
170.     alignItems: 'center',  
171.     justifyContent:'center',  
172.   },  
173.   // 竖直的分割线  
174.   verticalLine:{  
175.     width:0.5,  
176.     height:44,  
177.     backgroundColor:'#ccc',  
178.   },  
179.   buttonText:{  
180.     fontSize:16,  
181.     color:'#3393F2',  
182.     textAlign:'center',  
183.   },  
184. });  

注意：NavigatorBar是我自定义的一个View，充当导航条，你可以将其换成一个按钮就行了；
效果如图：