React-Native学习笔记之：Modal实现覆盖效果（类似安卓中PopuWindow）

Modal组件可以用来覆盖包含React Native根视图的原生视图,类似于Android原生控件中的PopuWindow效果。
例如点击某个Button会在当前页面上弹出一个覆盖层页面，可以在上面实现指定的操作。

import React, {Component} from 'react';

import {
AppRegistry,
StyleSheet,
View,
TouchableOpacity,
Text
} from 'react-native';
import ModalPage from './ModalPage'
export default class StudyGithub extends Component {
constructor(props) {
super(props);
this.state = {
/*设置弹出框是否可见*/
viewCanVisible: false,
}
}

render() {
return (<View>
<TouchableOpacity onPress={()=>this.showPage()}>
<Text style={styles.tabText}>点击可以弹出页面</Text>
</TouchableOpacity>
{/*根布局中添加弹出框层*/}
{this.renderVisibleView()}
</View>);
}

/**
*   visible={this.state.viewCanVisible}设置是否可见
*   onClose设置关闭操作
* @returns {XML}
*/
renderVisibleView() {
return (
<ModalPage
visible={this.state.viewCanVisible}
{...this.props}
onClose={()=> {
this.setState({viewCanVisible: false})
}}/>
)
}

/**
* 弹出框可见
*/
showPage() {
this.setState({viewCanVisible: true});
}
}

const styles = StyleSheet.create({
container: {
flex: 1
},
tabText: {
fontSize: 20,
color: 'blue',
margin: 20,
paddingLeft: 15
},
});

AppRegistry.registerComponent('StudyGithub', () =>StudyGithub);

import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Modal,
ScrollView,
TouchableHighlight,
Platform
} from 'react-native';
export default  class ModalPage extends Component {
constructor(props) {
super(props)
}

/**
* animationType设置动画类型:PropTypes.oneOf(['none', 'slide', 'fade'])
*transparent:是否透明
* visible：是否可见
* onRequestClose：关闭操作
* @returns {XML}
*/
render() {
return (<Modal
animationType={"slide"}
transparent={true}
visible={this.props.visible}
onRequestClose={() => {
this.props.onClose();
}}
>
<ScrollView style={styles.modalContainer}>
{this.renderThemeItems()}
</ScrollView>
</Modal>)
}

/**
* 随意添加五个Text，根据实际情况修改
* @returns {Array}
*/
renderThemeItems() {
var views = [];
for (let i = 0, length = 5; i < length; i++) {
views.push(<View key={i}>
{this.getContentItem('每一行的内容,点击弹出框会消失')}
</View>)
}
return views;
}

getContentItem(content) {
return (
<TouchableHighlight
style={{flex: 1}}
underlayColor='blue'
onPress={()=>this.onClickItem()}
>
<View>
<Text style={{fontSize:20,color:'white',margin:5,paddingLeft:20}}>{content}</Text>
</View>
</TouchableHighlight>
);
}

onClickItem() {
this.props.onClose();
}
}
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
margin: 10,
marginTop: Platform.OS === 'ios' ? 20 : 10,
backgroundColor: 'gray',
borderRadius: 3,
shadowColor: 'gray',
shadowOffset: {width: 2, height: 2},
shadowOpacity: 0.5,
shadowRadius: 2,
padding: 3
}
});