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:
錯誤:違反不變:元素類型無效:期望一個字符串(對於內置組件)或一個類/函數(對於複合組件),但得到:未定義。
我不想安裝反應本地模態。我想使用react-native軟件包附帶的Modal組件。 –