导航到另一个屏幕时关闭模态
Dismiss modal when navigating to another screen
我有一个带 主屏幕 的应用程序,在这个屏幕上我正在渲染 Modal,它在 button press
上打开,在 Modal
我有一个按钮应该 将我导航到另一个屏幕 ,它导航正确但是当我导航到另一个屏幕时 模态没有不消失,怎么隐藏?
添加代码演示
首页:
import React, { Component } from 'react';
import Modal from './Modal';
class Home extends Component {
state = {
isModalVisible: false
};
toggleModal = () =>
this.setState({ isModalVisible: !this.state.isModalVisible });
render() {
const { navigate } = this.props.navigation;
<Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
/>
);
}
}
export default Home;
模态:
import React, { Component } from "react";
import Modal from "react-native-modal";
class Modal extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<Modal
isVisible={this.props.visible}>
<Button onPress={() => {navigate('Main')}}>
>Button</Text>
</Button>
</Modal>
);
}
}
export default Modal;
您应该提供对定义模态组件可见性状态的变量的引用。您需要定义一个隐藏模态的函数,并将函数引用传递给模态组件,并在按下按钮和导航操作时执行它。
类似于 -
你的主屏幕应该有一个类似的功能 -
onModalClose = () => {this.setState({isModalVisible: false})}
然后将其作为对模态组件的引用传递,例如 -
<Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.onModalClose}
/>
并在 <Button/>
组件的 onPress()
方法上调用它,例如-
<Button onPress={() => {this.props.onModalClose(); navigate('Main')}}>
编辑
刚刚注意到,由于您已经有一个可以切换模态可见性的函数,因此您无需定义新函数。您可以将该函数引用传递给模态组件本身。
<Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.toggleModal}
/>
理想情况下,您应该等待 setState
在回调中完成,然后导航到屏幕,因为这些方法是 async 并且如果 navigate
在 setState
完成之前调用。
另外 parent 应该控制 child 的状态。
首页
onNavigate = () => {
this.setState({isModalVisible: false}, () => this.props.navigation.navigate('Main')
}
<Modal
visible={this.state.isModalVisible}
onNavigate={this.onNavigate}
/>
模态
<Modal
isVisible={this.props.visible}>
<Button onPress={this.props.onNavigate}>
<Text>Button</Text>
</Button>
</Modal>
我采纳了 答案并使其适用于任何屏幕。
主页
import React, { Component } from 'react';
import Modal from './Modal';
class Home extends Component {
state = {
isModalVisible: false
};
toggleModal(screenName) {
this.setState({isModalVisible: !this.state.isModalVisible });
if (screenName && screenName != '') {
this.props.navigation.navigate(screenName);
}
}
render() {
<Modal
visible={this.state.isModalVisible}
onDismiss={(screenName) => { this.toggleModal(screenName); }}
/>
);
}
}
export default Home;
模态:
class Modal extends Component {
dismissScreen(screenName) {
const dismissAction = this.props.onDismiss;
dismissAction(screenName);
}
render() {
return(
<View style={{ flex: 1, padding: 20 }}>
<Button
title="Dismiss Modal"
onPress={() => {this.dismissScreen();}}
/>
<Button
title="Navigate to Other Screen"
onPress={() => {this.dismissScreen('ScreenName');}}
/>
</View>
);
}
}
我有一个带 主屏幕 的应用程序,在这个屏幕上我正在渲染 Modal,它在 button press
上打开,在 Modal
我有一个按钮应该 将我导航到另一个屏幕 ,它导航正确但是当我导航到另一个屏幕时 模态没有不消失,怎么隐藏?
添加代码演示
首页:
import React, { Component } from 'react';
import Modal from './Modal';
class Home extends Component {
state = {
isModalVisible: false
};
toggleModal = () =>
this.setState({ isModalVisible: !this.state.isModalVisible });
render() {
const { navigate } = this.props.navigation;
<Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
/>
);
}
}
export default Home;
模态:
import React, { Component } from "react";
import Modal from "react-native-modal";
class Modal extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<Modal
isVisible={this.props.visible}>
<Button onPress={() => {navigate('Main')}}>
>Button</Text>
</Button>
</Modal>
);
}
}
export default Modal;
您应该提供对定义模态组件可见性状态的变量的引用。您需要定义一个隐藏模态的函数,并将函数引用传递给模态组件,并在按下按钮和导航操作时执行它。
类似于 -
你的主屏幕应该有一个类似的功能 -
onModalClose = () => {this.setState({isModalVisible: false})}
然后将其作为对模态组件的引用传递,例如 -
<Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.onModalClose}
/>
并在 <Button/>
组件的 onPress()
方法上调用它,例如-
<Button onPress={() => {this.props.onModalClose(); navigate('Main')}}>
编辑
刚刚注意到,由于您已经有一个可以切换模态可见性的函数,因此您无需定义新函数。您可以将该函数引用传递给模态组件本身。
<Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.toggleModal}
/>
理想情况下,您应该等待 setState
在回调中完成,然后导航到屏幕,因为这些方法是 async 并且如果 navigate
在 setState
完成之前调用。
另外 parent 应该控制 child 的状态。
首页
onNavigate = () => {
this.setState({isModalVisible: false}, () => this.props.navigation.navigate('Main')
}
<Modal
visible={this.state.isModalVisible}
onNavigate={this.onNavigate}
/>
模态
<Modal
isVisible={this.props.visible}>
<Button onPress={this.props.onNavigate}>
<Text>Button</Text>
</Button>
</Modal>
我采纳了
主页
import React, { Component } from 'react';
import Modal from './Modal';
class Home extends Component {
state = {
isModalVisible: false
};
toggleModal(screenName) {
this.setState({isModalVisible: !this.state.isModalVisible });
if (screenName && screenName != '') {
this.props.navigation.navigate(screenName);
}
}
render() {
<Modal
visible={this.state.isModalVisible}
onDismiss={(screenName) => { this.toggleModal(screenName); }}
/>
);
}
}
export default Home;
模态:
class Modal extends Component {
dismissScreen(screenName) {
const dismissAction = this.props.onDismiss;
dismissAction(screenName);
}
render() {
return(
<View style={{ flex: 1, padding: 20 }}>
<Button
title="Dismiss Modal"
onPress={() => {this.dismissScreen();}}
/>
<Button
title="Navigate to Other Screen"
onPress={() => {this.dismissScreen('ScreenName');}}
/>
</View>
);
}
}