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

然后是错误：

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

我希望在安装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 和的上下文只会在调用onModalDismis()时执行，而不是<CallModalComponent/>的渲染。 Difference in using functions in react-native

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

2 个答案: