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编写的那部分内容覆盖在原生视图上显示。
下面是代码：

 //  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，充当导航条，你可以将其换成一个按钮就行了；
效果如图：