React Native - 模态不渲染

Question

这是render函数，它应该包含RespondToInquiry组件：

主屏幕.js

componentDidMount() {
console.log('key for stack navigator:',this.props.navigation.dangerouslyGetParent().state.key);
this._sub = this.props.navigation.addListener(
'didFocus',
() => {
console.log('in didFocus for HomeScreen');
if(this.props.navigation.getParam('data', '') != '') {
console.log('showRespondTo fired.');
this.setState({info: this.props.navigation.getParam('data', '')})
this.setState({showRespondTo: true});
}
}
);
....
}
render() {
console.log('in render of HomeScreen',this.props.navigation.getParam('data', ''),this.state.showRespondTo);
return (
<View style={{flex:1}}>
{this.state.showRespondTo && this.returnRespond()}
<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}
/>
</View>
</TouchableWithoutFeedback>
</View>
);
}

console.log('in render of HomeScreen',this.props.navigation.getParam('data', ''),this.state.showRespondTo);的输出为：

in render of HomeScreen (2)
{tempId: "1537747945332", message: "Hi, I would like to rent an item from you.", dates: "[]"}
true

所以你可以看到this.state.showRespondTo是正确的，所以它应该呈现RespondToInquiry，但它没有。

这是RespondToInquiry.js的样子：

_renderModalContent = () => (
<TouchableWithoutFeedback onPress={() => {if(this.state.keyboardOpen) {Keyboard.dismiss()}}}>
<Animated.View
style={{
paddingTop: 5,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
marginTop: this.state.yPosition,
marginBottom: this.state.yPositionPositive,
flex: 1,
marginLeft: (Dimensions.get('window').width - 300) / 4,
backgroundColor: 'rgba(0,0,0,0.8)',
width: 300,
borderRadius: 4,
borderWidth: 0,
}}>
<View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
<View style={{flexDirection: 'column', justifyContent: 'space-between', flex: 0, backgroundColor: '#e6fffe', marginTop: 5}}>
<View style={{flex: 0, backgroundColor: '#e6fffe', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingBottom: 10, borderBottomColor: '#6de3dc', borderBottomWidth: 0}}>
<View style={{justifyContent: 'center', alignItems: 'center', flex: 0.5}}>
<View style={{flexDirection: 'column', justifyContent: 'space-between'}}>
<Image
source={require('../assets/billythekid2.jpg')}
style={{height: 60, width: 60, marginTop: Platform.OS === 'ios' ? 10 : 10, borderColor: '#6de3dc', borderWidth: 2, borderRadius: 30}}
/>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 5}}>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
</View>
</View>
</View>
<View style={{flexDirection: 'column', backgroundColor: '#e6fffe', marginTop: Platform.OS === 'ios' ? 10 : 10, flex: 0.5}}>
<View style={{flexDirection: 'row', flex: 0.5}}>
<View style={{flex: 0, alignSelf: 'center'}}>
<Text style={{fontSize: 16, fontWeight: '700'}}>
eamon.white
</Text>
</View>
</View>
</View>
</View>
<View style={{flex: 0, marginBottom: 5, backgroundColor: '#e6fffe'}}>
<Text
style={{
width: 280,
flex: 0,
backgroundColor: '#e6fffe',
paddingLeft: 5,
borderWidth: 0,
borderRadius: 4,
color: '#000'
}}>
{this.state.messageFromSender}
</Text>
</View>
</View>
<View style={{ flexDirection: 'column', flex: 1, marginBottom: 5 }}>
<Text
style={{
flex: 0,
width: Dimensions.get('window').width,
color: 'white',
fontWeight: '700',
marginTop: 5,
marginBottom: 5
}}>
Date(s) Needed:
</Text>
{this.showCalendar()}
</View>
<View style={{ flexDirection: 'column', flex: 0.1, marginBottom: 10 }}>
<TextInput
style={{
width: 280,
flex: 1,
borderColor: 'gray',
borderWidth: 1,
backgroundColor: '#ffffff',
paddingLeft: 5,
borderRadius: 4,
}}
onChangeText={text => this.setState({ message: text })}
value={this.state.message}
multiline={true}
numberOfLines={2}
onFocus={this.animateUp}
placeholder='Type a message...'
/>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
RESPOND
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
ACCEPT
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
DECLINE
</Text>
</TouchableOpacity>
</View>
</View>
</Animated.View>
</TouchableWithoutFeedback>
);
render() {
//console.log('this.state._markedDates in render:', this.state._markedDates);
return (
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}                                                           //THIS NEEDS TO BE TRUE WHEN I COME BACK
onBackdropPress ={() => {/*console.log("backdrop pressed");*/ if(!this.state.keyboardOpen) {this.setModalVisible(false)} else {Keyboard.dismiss()}}}>
{this._renderModalContent()}
</Modal>
)
}

Home路由从App.js导航到，它正在接收推送通知...对推送通知的响应是导航是否发生时委托的内容。导航如下所示：

应用.js

export default class App extends React.Component {
constructor() {
super();
}
componentDidMount() {
this.messageListener = firebase.messaging().onMessage((message: RemoteMessage) => {
console.log(message);
// prevent infite look
//if (!message.local_notification) {
let count = 1;
let string = '';
for(date of JSON.parse(message.data.dates)) {
if(count == JSON.parse(message.data.dates).length)
string += date;
else {
string += date+'n';
}
count++;
}
// Process your message as required
Alert.alert(
'New Rental Inquiry',
'Dates Requested:nn'+string,
[
{text: 'RESPOND', onPress: () => {
console.log("message.data:", message.data);
console.log("this.props.ref:", this.props.ref);
//NavigationService.reset('Home', { data: JSON.parse(JSON.stringify(message.data)) })
NavigationService.navigate('Home', { data: JSON.parse(JSON.stringify(message.data)) });
}},
{text: 'IGNORE', onPress: () => console.log('IGNORE Pressed')},
],
{ cancelable: false }
)
//}
});
}
....

我直接从 React Native 文档中获取了NavigationService，如果您不想看看它是如何工作的，您可以谷歌它，但它只是导航如何使用this.props.navigation.navigate()。

更新

我发现了这个错误，也许，当我按下模态的背景时，我有效地将其visible道具设置为 false，这样当RespondToInquiry再次出现时(我假设它从未被卸载因为我看到的行为(，模态是不可见的。将模态设置为可见似乎有点棘手，因为RespondToInquiry似乎没有被卸载(即我不能把它放在componentWillUnmount(。在RespondToInquiry中，在state变量中 - 我将模态设置为可见的默认值，因此当我从它导航时，即使它不在任何导航堆栈中，它也不能被卸载。另外，在上面 - 您可以看到我的didFocus侦听器，它更改了负责渲染RespondToInquiry的条件。

Answer 1

我将其添加到HomeScreen.jscomponentDidMount：

this._sub2 = this.props.navigation.addListener(
'didBlur',
() => {
console.log('in didBlur for HomeScreen');
this.setState({info: this.props.navigation.getParam('data', '')})
this.setState({showRespondTo: false});
}
);

从本质上讲，似乎要再次将条件识别为真，必须重置 - 对此的解释会很好。

Answer 2

我还遇到了模态未渲染的问题，这是由于出于验证目的在设置状态后发出
windows.alert()
调用。
从而通过删除警报来解决。