將道具從模式傳遞到其他組件反應導航

Question

我使用反應導航 。 我有一個TabNavigator 。 每個Tab包含一個StackNavigator 。 從一個StackNavigator ，可以打開Modal 。 當我單擊某個Component的Button ，將打開Modal 。

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時使用...我知道我可以使用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

您可以在導航時將參數傳遞到屏幕。 這使您可以將功能發送到下一個屏幕，然后可以在需要時啟動它。 這里有更多細節。

例

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/>的呈現。 在React-Native中使用功能的差異