javascript - 将 Prop 从 Modal 传递到其他组件 react 导航

Question

我使用 react navigation .我有一个 TabNavigator .每个Tab包含 StackNavigator .来自一个StackNavigator , 可以打开 Modal . Modal当我点击 Button 时打开在某个Component .

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

    ...

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

TabNav 中的注册画面<MyModal />是有状态的 Component . 在 Modal 结束时我需要 state的 <MyModal />将传递给 <CallModalComponent /> .

我遇到的问题是如何使用 react navigation在两者之间...我知道我可以使用 redux并通过 global store 发送/检索它.但我想知道它是否可能只有 react native . 有什么建议吗？

编辑

我从答案中实现了代码

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={(childVar) => navigate("Modal", {onModalDismis: this.onModalDismis()})}/>

// Then in your modal component

componentWillUnmount () {
    console.log('unmount');
    this.props.navigation.state.params.onModalDismis('here we go');
}

记录以下内容: 当 Modal Component已安装我得到:

modal is closing undefined

然后，当我实际关闭 Modal 时，我得到:

unmount

然后是错误:

Cannot read property of onModalDismiss of undefined.

我预计在安装 Modal 时不会记录任何内容.然后，当我关闭 Modal我以为

unmount , modal is closing和 here we go被记录。

Answer 1

您可以在导航时将参数传递给屏幕。这允许您将功能发送到下一个屏幕，然后您可以在需要时启动它。更多详情 here .

示例

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();
}