mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-24 04:16:00 +08:00
Add <Modal /> component
Summary: Create Modal component that can be used to present content modally.
This commit is contained in:
48
Libraries/Modal/Modal.js
Normal file
48
Libraries/Modal/Modal.js
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule Modal
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('React');
|
||||
var StyleSheet = require('StyleSheet');
|
||||
var View = require('View');
|
||||
|
||||
var requireNativeComponent = require('requireNativeComponent');
|
||||
var RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
|
||||
|
||||
class Modal extends React.Component {
|
||||
render(): ?ReactElement {
|
||||
if (this.props.visible === false) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<RCTModalHostView animated={this.props.animated} style={styles.modal}>
|
||||
<View style={styles.container}>
|
||||
{this.props.children}
|
||||
</View>
|
||||
</RCTModalHostView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
modal: {
|
||||
position: 'absolute',
|
||||
},
|
||||
container: {
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Modal;
|
||||
1
Libraries/react-native/react-native.js
vendored
1
Libraries/react-native/react-native.js
vendored
@@ -24,6 +24,7 @@ var ReactNative = Object.assign(Object.create(require('React')), {
|
||||
Image: require('Image'),
|
||||
ListView: require('ListView'),
|
||||
MapView: require('MapView'),
|
||||
Modal: require('Modal'),
|
||||
Navigator: require('Navigator'),
|
||||
NavigatorIOS: require('NavigatorIOS'),
|
||||
PickerIOS: require('PickerIOS'),
|
||||
|
||||
Reference in New Issue
Block a user