將道具從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 />傳遞到<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

@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

Answer 2

您可以在導航時將參數傳遞給屏幕。這允許您將功能發送到下一個屏幕，然後您可以在需要時啓動它。更多詳情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(); 
}