在子组件 React Native 中关闭模式答案

【问题标题】：Closing modal in child component React Native在子组件 React Native 中关闭模式
【发布时间】：2019-04-26 05:55:43
【问题描述】：

我在 react native 中有两个组件，我无法从我的子组件中关闭模式。

ListTrips - 父级

ModalAddTrip - 孩子

ListTrips.js

import ModalAddTrip from './ModalAddTrip';
....
....
this.state = {
    isModalAddTripVisible: false
} 
....
handleDismissModalAddTrip = () => {
    this.setState({ isModalAddTripVisible: false });
};

closeModal() {
    this.refs.ModalAdd.handleDismissModalAddTrip();
}
....

<ModalAddTrip
    ref="ModalAdd"
    isVisible={this.state.isModalAddTripVisible}
    onBackDropPress={this.handleDismissModalAddTrip}
    closeModal={() => this.closeModal()}
    onRequestClose={this.handleDismissModalAddTrip}
/>

ModalAddTrip.js

<Modal
    isVisible={isVisible}
    onBackdropPress={onBackDropPress}
    closeModal={this.props.child}
>
<Button
    style={{ fontSize: 18, color: 'white' }}
    containerStyle={{
        padding: 8,
        marginLeft: 70,
    }}
    onPress={this.closeModal}
>

一旦我打开它，我就无法关闭它。我知道它与引用/道具有关，但我已经搞砸了好几个小时，但我无处可去。我正在尝试类似于this.props.closeModal; 的方法，同时将 ref 切换到子组件，但它也不起作用。在 ModalAddTrip 的函数中，但这也不起作用。

非常感谢任何帮助。谢谢

【问题讨论】：

标签： react-native modal-dialog ref react-props

【解决方案1】：

//对我来说效果很好//

模态示例.JS

...
import Child from "./components/Child.js"

const ModalExample = () => {    

  const [modalVisible, setModalVisible] = useState(true)

  return(
    <Modal visible={ModalVisible}>
      <Child closeModal={()=>setModalVisible(false)}/>
    </Modal>
  )
}
export default ModalExample

儿童.JS

...
const Child = (closeModal) => {
  render(
    <Button title="close" onPress={closeModal.closeModal}/>
  )
}
export default Child

【讨论】：

【解决方案2】：

这是我用来处理模态的解决方案。

export default class MyModal extends React.Component<Props, State>{

  constructor(props: Props){
    super(props);
    this.state = {
      visible: false,
    }
  }

  // Use this method to toggle the modal !
  toggleModal = () => {
    this.setState({visible: !this.state.visible});
  }


  render(){
    return(
      <Modal
      isVisible={this.state.visible}
      hideModalContentWhileAnimating
      onBackdropPress={() => {
        this.toggleModal();
      }}
      useNativeDriver
      >
        <View style={{backgroundColor: "white", padding: 5}}>
        </View>
      </Modal>
    );
  }
}

如果我按下它，模态框将关闭 -> 它可以自行关闭。

现在要从父组件中管理它，只需从您的 modal 中获取 ref：

  <MyModal 
    ref={ref => {
      this.myModal = ref;
    }}
  />

你可以从父组件切换它：

toggleMyModal = () => {
    if(this.myModal){
      this.myModal.toggleModal();
    }
  }

如果你成功了，请告诉我:)

【讨论】：

没问题@OscarFen ！请考虑接受答案作为解决方案；）
我的声望不够 :(
你不能点击答案分数下的小“检查”标志吗？奇怪的是你不能接受你自己的问题的解决方案！无论如何，祝你的项目好运

【解决方案3】：

ModalAddTrip.js

  _toggleModal = () =>
      this.setState({ isVisible: !this.state.isVisible });
  ....

  render() { 
  ....
   <Modal
    isVisible={isVisible}
    onBackdropPress={onBackDropPress}
  >
      <Button
            style={{ fontSize: 18, color: 'white' }}
            containerStyle={{
              padding: 8,
              marginLeft: 70,
            }}
            onPress={this._toggleModal} >
</Modal>

【讨论】：

没用，不过还是感谢您的帮助。编辑：这可能与我在 ModalAddTrip 中的状态有关吗？