2015-09-14 59 views
0

我正在嘗試使用來自react-native的模態組件,它的值是未定義的。這裏是部分我試圖建立:模態組件未定義在react-native 0.10.1

'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:

錯誤:違反不變:元素類型無效:期望一個字符串(對於內置組件)或一個類/函數(對於複合組件),但得到:未定義。

回答

0

我不在你要求的模塊模塊。 確保你的npm在你的js文件中安裝幷包含下面的行。

require statements

+0

我不想安裝反應本地模態。我想使用react-native軟件包附帶的Modal組件。 –

0

升級到反應母語0.11.0解決了問題,我