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

Question

我用react navigation。我有一个TabNavigator。每个 Tab 包含一个 StackNavigator。从一个StackNavigator，可以打开一个Modal。 Modal是在某个Component中点击Button时打开的。

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 结束时，我需要将 <MyModal /> 的 state 传递给 <CallModalComponent />。

我遇到的问题是如何在两者之间使用 react navigation...我知道我可以通过 [=29= 使用 redux 和 send/retrieve ].但我想知道仅 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();
}

Answer 2

@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");
}

使用 arrow function 的原因是因为它 binds() 这个 https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 and it only gets executed when onModalDismis() is called, and not the render of <CallModalComponent/>.

的上下文

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

Pass props from Modal to other Component react navigation

javascript

react-native

react-navigation