// 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è)按鈕點(diǎn)擊了');  this._setModalVisible();  }   // 顯示/隱藏 modal  _setModalVisible() {  let isShow = this.state.show;  this.setState({   show:!isShow,  });  }   // 繪制View  render() {   return (   <View style={styles.container}>    <NavigatorBar    title='Modal測(cè)試'    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 多行了超出一行了會(huì)怎么顯示，就像這樣顯示了很多內(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 控制是否帶有動(dòng)畫效果 // 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',  },  // 標(biāo)題  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',  }, });