Javascript 将道具从模态传递到其他组件

我用。我有一个

选项卡导航器

。每个

选项卡

都包含一个

堆栈导航器

。从一个

堆栈导航器

，可以打开一个

模式

。 当我单击某个

组件中的
按钮时，会打开
模式

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...

    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal")}/>

将记录以下内容：
安装
模态组件时，我得到：

modal正在关闭
未定义

然后，当我实际关闭
模式时，我得到：

卸载

然后是错误：

无法读取未定义的onModalDismiss的属性

我希望在安装
Modal
时不会有任何记录。然后，当我关闭
模式时，我期望

卸载
，
模式正在关闭
，
我们开始记录。
您可以在导航时向屏幕传递参数。这允许您将函数发送到下一个屏幕，然后您可以在需要时启动它。更多细节

示例

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...
    onModalDismis() {
      console.log('modal is closing');
    }
    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal", {onModalDismis: this.onModalDismis})}/>

// Then in your modal component

componentWillUnmount () {
    this.props.navigation.state.params.onModalDismis();
}

导出默认类CallModalComponent扩展组件{
建造师（道具）{
超级（道具）
...
}
...
onModalDismis（）{
console.log（'modal is closing'）；
}
render（）{
const{navigate}=this.props.navigation；
返回(
导航（“模态”{onModalDismis:this.onModalDismis}}/>
//然后在模态组件中
组件将卸载（）{
this.props.navigation.state.params.onModalDismis（）；
}
您可以在导航时将参数传递到屏幕。这允许您将函数发送到下一个屏幕，然后您可以在需要时启动它。更多详细信息

示例

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...
    onModalDismis() {
      console.log('modal is closing');
    }
    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal", {onModalDismis: this.onModalDismis})}/>

// Then in your modal component

componentWillUnmount () {
    this.props.navigation.state.params.onModalDismis();
}

导出默认类CallModalComponent扩展组件{
建造师（道具）{
超级（道具）
...
}
...
onModalDismis（）{
console.log（'modal is closing'）；
}
render（）{
const{navigate}=this.props.navigation；
返回(
导航（“模态”{onModalDismis:this.onModalDismis}}/>
//然后在模态组件中
组件将卸载（）{
this.props.navigation.state.params.onModalDismis（）；
}
@bennygenel非常接近。添加了一点

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...
    onModalDismis(childVar) {
      console.log('modal is closing');
      console.log(childVar);
    }
    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal", {onModalDismis:(childVar) => this.onModalDismis(childVar)})}/>


// Then in your modal component
componentWillUnmount () {
    this.props.navigation.state.params.onModalDismis("some var");
}

导出默认类CallModalComponent扩展组件{
建造师（道具）{
超级（道具）
...
}
...
onModalDismis（childVar）{
console.log（'modal is closing'）；
console.log（childVar）；
}
render（）{
const{navigate}=this.props.navigation；
返回(
导航（“模态”{onModalDismis：（childVar）=>this.onModalDismis（childVar）}}/>
//然后在模态组件中
组件将卸载（）{
this.props.navigation.state.params.onModalDismis（“somevar”）；
}

之所以使用
箭头函数
，是因为它
绑定了它的上下文，只有在调用了
onModalDismis（）
时才会执行，而不是在
@bennygenel的渲染非常接近。添加了一点

export default class CallModalComponent extends Component {
    constructor(props) {
        super(props)
    ...
    }

    ...
    onModalDismis(childVar) {
      console.log('modal is closing');
      console.log(childVar);
    }
    render() {
    const { navigate } = this.props.navigation;
         return (
              <Button
               ....
               onPress={() => navigate("Modal", {onModalDismis:(childVar) => this.onModalDismis(childVar)})}/>


// Then in your modal component
componentWillUnmount () {
    this.props.navigation.state.params.onModalDismis("some var");
}

导出默认类CallModalComponent扩展组件{
建造师（道具）{
超级（道具）
...
}
...
onModalDismis（childVar）{
console.log（'modal is closing'）；
console.log（childVar）；
}
render（）{
const{navigate}=this.props.navigation；
返回(
导航（“模态”{onModalDismis：（childVar）=>this.onModalDismis（childVar）}}/>
//然后在模态组件中
组件将卸载（）{
this.props.navigation.state.params.onModalDismis（“somevar”）；
}

使用
箭头函数
的原因是它
绑定（）
此函数的上下文，并且它仅在
onModalDismis（）时执行调用了
，而不是
的渲染。您能给我指一下文档吗？我想您实现的代码是错误的。请用您迄今为止尝试过的更新您的问题，以便我能看得更清楚。将其作为答案发布：）谢谢你的帮助！你能给我指一下文档吗，我可以在那里读到更多关于它的信息吗？我认为你实现的代码是错误的。用你迄今为止尝试过的方法更新你的问题，以便我能更好地了解它。将其作为答案发布：）谢谢你的帮助！