Javascript 反应本机-can';无法获取要使用条件渲染的视图
我有一段代码,试图呈现一个元素:Javascript 反应本机-can';无法获取要使用条件渲染的视图,javascript,react-native,components,rendering,listener,Javascript,React Native,Components,Rendering,Listener,我有一段代码,试图呈现一个元素: render() { //console.log('this.state.showRespondTo:',this.state.showRespondTo); return ( <View style={{flex:1}}> {this.displayMessage()} <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
render() {
//console.log('this.state.showRespondTo:',this.state.showRespondTo);
return (
<View style={{flex:1}}>
{this.displayMessage()}
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<MultiSelectList
style={{backgroundColor: '#ffe4c4'}}
data={this.state.items}
renderItem={this.renderListItems}
numColumns={2}
contentContainerStyle={{}}
onEndReachedThreshold={0.5}
maxToRenderPerBatch={2}
initialNumToRender={4}
ListHeaderComponent={this.renderHeader}
getItemLayout={(data, index) => (
{length: Dimensions.get('window').height/2, offset: Dimensions.get('window').height/2 * index, index}
)}
backgroundColor={this.state.backgroundColor}
//contentContainerStyle={{backgroundColor: '#1e4683'}}
/>
</View>
</TouchableWithoutFeedback>
</View>
);
}
displayMessage() {
if(this.state.showRespondTo) {
console.log('this.state.showRespondTo:', this.state.showRespondTo);
return ( <RespondToInquiry/> )
}
}
对于控制台输出,我看到:
this.state.showrepondto:–true
因此,我知道条件正在变为它应该呈现组件的状态。我还看到屏幕的一半(组件应该在哪里)是空白/白色背景。这是因为我有我的flexbox
设置,这是我想要的行为。但是应该渲染的元素没有显示出来。didFocus
侦听器上的条件状态更改,如下所示:
componentDidMount() {
this._sub = this.props.navigation.addListener(
'didFocus',
() => {
if(this.props.navigation.getParam('data', '') != '') {
console.log('showRespondTo fired.');
this.setState({showRespondTo: true});
}
}
);
....
}
为什么我的InitiateRent
组件不在空白/空白区域呈现(参见下图)
只是一些愚蠢的事情,
this.state.modalVisible
最初被设置为false,因此模态没有显示出来
componentDidMount() {
this._sub = this.props.navigation.addListener(
'didFocus',
() => {
if(this.props.navigation.getParam('data', '') != '') {
console.log('showRespondTo fired.');
this.setState({showRespondTo: true});
}
}
);
....
}