react-native 0.10.1 中未定义模态组件

Question

我正在尝试使用 react-native 中的 Modal 组件，它的值未定义。这是我正在尝试构建的组件：

'use strict';

var React = require('react-native');
var {
  Modal,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var Button = React.createClass({
  getInitialState() {
    return {
      active: false,
    };
  },
  onHighlight: function() {
    this.setState({active: true});
  },
  onUnhighlight: function() {
    this.setState({active: false});
  },
  render: function() {
    var colorStyle = {
      color: this.state.active ? '#fff' : '#000',
    };

    return (
      <TouchableHighlight
        onHideUnderlay={this.onUnhighlight}
        onPress={this.props.onPress}
        onShowUnderlay={this.onHighlight}
        style={[styles.button, this.props.style]}
        underlayColor='#a9d9d4'>
          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
      </TouchableHighlight>
    );
  }
});

var ModalBox = React.createClass({
  getInitialState: function() {
    return {
      animated: true,
      modalVisible: true,
      transparent: false,
    };
  },
  setModalVisible: function(visible) {
    this.setState({modalVisible: visible});
  },
  render: function() {
    var modalBackgroundStyle = {
      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
    };
    var innerContainerTransparentStyle = this.state.transparent
      ? {backgroundColor: '#fff', padding: 20}
      : null;

    return (
      <View>
        <Modal
          animated={this.state.animated}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}>
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
            </View>
            <Button
              onPress={this.setModalVisible.bind(this, false)}
              style={styles.modalButton}>
              Close
            </Button>
          </View>
        </Modal>
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  innerContainer: {
    borderRadius: 10,
  },
  button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    justifyContent: 'center',
    overflow: 'hidden',
  },
  buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
  },
  button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    justifyContent: 'center',
    overflow: 'hidden',
  },
  buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
  },
  modalButton: {
    marginTop: 10,
  },
  modalButton: {
    marginTop: 10,
  },
});

module.exports = ModalBox;

这是我在 index.ios.js 中添加 <ModalBox/> 组件时遇到的错误：

错误：不变违规：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

Answer 1

我不需要模态模块。 确保你 npm install 并在你的 js 文件中包含以下行。

Answer 2

升级到 react-native 0.11.0 解决了我的问题