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

I'm trying to use the Modal component from react-native and it's value is undefined. Here is the component I'm trying to build:

我正在尝试使用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;

And this is the error I get when I add <ModalBox/> component to my index.ios.js:

这是我将组件添加到index.ios.js时得到的错误:

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

错误:不变违规:元素类型无效:期望字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。

2 个解决方案

#1

I don't where you're requiring the modal module. Make sure you npm install and include the below line in your js file.

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

#2

Upgrading to react-native 0.11.0 fixed the problem for me

升级到react-native 0.11.0为我解决了这个问题

#1