将 props 从 Modal 传递到其他组件反应导航

Question

我使用反应导航。我有一个TabNavigator。每个Tab包含一个StackNavigator. 从一个StackNavigator，可以打开一个Modal。\nModal当我点击Button某个特定的a 时，就会打开Componenta 时，会打开该文件。

\n\n

export default class CallModalComponent extends Component {\n    constructor(props) {\n        super(props)\n    ...\n    }\n\n    ...\n\n    render()\xc2\xa0{\n    const { navigate } = this.props.navigation;\n         return (\n              <Button\n               ....\n               onPress={() => navigate("Modal")}/>\n

\n\n

TabNav注册屏幕中的<MyModal />是一个有状态的Component。\n关闭时Modal我需要将state传递<MyModal />给<CallModalComponent />。

\n\n

我遇到的问题是这react navigation之间如何工作...我知道我可以redux通过global store. 但我想知道是否可能仅react native. \n有什么建议吗？

\n\n

编辑

\n\n

我实现了答案中的代码

\n\n

export default class CallModalComponent extends Component {\n    constructor(props) {\n        super(props)\n    ...\n    }\n\n    ...\n    onModalDismis(childVar) {\n      console.log(\'modal is closing\');\n      console.log(childVar);\n    }\n    render() {\n    const { navigate } = this.props.navigation;\n         return (\n              <Button\n               ....\n               onPress={(childVar) => navigate("Modal", {onModalDismis: this.onModalDismis()})}/>\n\n// Then in your modal component\n\ncomponentWillUnmount () {\n    console.log(\'unmount\');\n    this.props.navigation.state.params.onModalDismis(\'here we go\');\n}\n

\n\n

记录以下内容：\n当Modal Component安装后我得到：

\n\n

modal is closing\nundefined

\n\n

然后，当我真正关闭时Modal，我得到：

\n\n

unmount

\n\n

然后是错误：

\n\n

\n

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

\n

\n\n

我预计在安装Modal. 然后，当我关闭Modal我期望的

\n\n

unmount，modal is closing和here we go记录。

\n

Answer 1

您可以在导航时将参数传递到屏幕。这允许您将功能发送到下一个屏幕，然后您可以在需要时启动它。更多详细信息请参见此处。

例子

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