呈現和關閉一個模式

Question

所以我有一個初步的屏幕下方，它允許你點擊一個按鈕，並呈現模式屏幕：

import SettingsScreen from './SettingsScreen'; 
... 
export default class InitialScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {modalVisible: false}; 
    } 

    setModalVisible(visible) { 
    this.setState({modalVisible: visible}); 
    } 
    render() { 
    return (
     <View> 
      <NavigationBar 
      title={{ title: 'Initial Screen', tintColor: 'white', }} 
      leftButton={ 
       <TouchableOpacity onPress={() => { 
       this.setModalVisible(!this.state.modalVisible) 
       }}> 
       <Image style={styles.leftButton} source={require('./../img/settings.png')} /> 
       </TouchableOpacity> 
      } 
      rightButton={{ title: 'Forward', tintColor: 'white' }} 
      style={{ backgroundColor: '#2196F3', }} 
      statusBar={{ tintColor: '#1976D2', style: 'light-content' }} 
      /> 
      <Modal 
      animationType={"slide"} 
      transparent={false} 
      visible={this.state.modalVisible} 
      onRequestClose={() => {alert("Modal has been closed.")}} 
      > 
      <SettingsScreen />   
     </Modal> 
     </View> 
    ); 
    } 
} 

它的工作原理，但現在在我的模態的屏幕我有一個按鈕，讓你解僱模態：

import ... 
export default class ModalScreen extends Component { 
    render() { 
     return (
      <View> 
      <TouchableOpacity onPress={() => { 
       this.props.setModalVisible(!this.state.modalVisible) 
       }}> 
       <Image source={require('./../img/close.png')} /> 
       </TouchableOpacity> 
      </View> 
     ); 
    } 
} 

但它給我一個錯誤說this.props.setModalVisible(!this.state.modalVisible)不是一個函數。 我將如何解除ModalScreen中的模態？

謝謝。

Answer 1

你應該通過setModalVisible（）功能的模態分量

初始成分：

<ModalComponent closeModal={this.setModalVisible} /> 

and on ModalComponent call it like this：

<TouchableOpacity onPress={() => { 
     this.props.closeModal(false) 
     }}> 
    <Image source={require('./../img/close.png')} /> 
    </TouchableOpacity> 

Answer 2

對於自定義函數反應本地使用ES6風格：

setModalVisible = (visible) => { 
    this.setState({modalVisible: visible}); 
} 

和代碼應爲：this.setModalVisible(!this.state.modalVisible)