reactnativemodal

标签：

‘use strict‘;

var React = require(‘react-native‘);
var Modal = require(‘react-native-modal‘);
var { AppRegistry, StyleSheet, View, Text } = React;

class App extends React.Component {
  constructor() {
    this.state = {
      isModalOpen: false
    };
  }

  openModal() {
    this.setState({isModalOpen: true});
  }

  closeModal() {
    this.setState({isModalOpen: false});
  }

  render() {
    return (
      <View style={styles.page}>
        <Text onPress={() => this.openModal()}>
          Open Modal.
        </Text>
        <Modal isVisible={this.state.isModalOpen} onClose={() => this.closeModal()}>
          <Text>Hello world!</Text>
        </Modal>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  page: {
    flex: 1,
    position: ‘absolute‘,
    bottom: 0,
    left: 0,
    right: 0,
    top: 0
  }
});

AppRegistry.registerComponent(‘App‘, () => App);

var App = React.createClass({
  mixins: [Modal.Mixin],

  render() {
    return (
      <View style={styles.page}>
        <Text onPress={() => this.openModal()}>
          Open Modal.
        </Text>
        <Modal backdropType="blur" isVisible={this.state.isModalOpen} onClose={() => this.closeModal()}>
          <Text>Hello world!</Text>
        </Modal>
      </View>
    );
  }
}

reactnativemodal

标签：

原文地址：http://www.cnblogs.com/wcLT/p/4988459.html