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;

这是我将<ModalBox/>组件添加到index.ios.js时出现的错误：

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

Answer 1

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

Answer 2

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

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

2 个答案: