2015-09-14 2 views
0

Я пытаюсь использовать компонент Modal из response-native и его значение не определено. Вот компонент Я пытаюсь построить:Модальный компонент не определен в native-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:

Ошибки: Инвариантные Нарушения: тип элемента invalid: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получила: undefined.

ответ

0

Я не там, где вам нужен модальный модуль. Убедитесь, что вы установили npm и включите следующую строку в файл js.

require statements

+0

Я не хочу, чтобы установить реагировать родной покадрово. Я хочу использовать компонент Modal, который поставляется с адаптивным пакетом. –

0

Обновление реагировать родной 0.11.0 исправлена ​​проблема для меня

Смежные вопросы