將道具從小孩帶到父母反應導航

Question

我正在使用react-navigation。我將props從react-native component改爲modal從react-navigation開始在水龍頭上打開。

export default class SomeComp extends Component { 
... 

render() { 
    const { navigate } = this.props; 
    return (
     <TouchableOpacity 
     onPress={navigate("Modal", {data: ..., ...})} 
     ..../> 
     ) 
    } 
} 

的modal裏面我訪問goBack()功能，關閉modal，以及通過SomeComp

export default class Modal extends Component { 
... 

render() { 
    const { data, ... } = this.props.navigation.state.params; 
    const { goBack } = this.props.navigation; 
    return (
     <View> 
      <TouchableOpacity 
      onPress={goBack()} 
      ..../> 
      <Text> 
       {data, ...} 
      </Text> 
     </View> 
     ) 
    } 
} 

什麼我不知道是通過props，無論是其可能的，或者不通過props下從Modal到SomeComp,沒有使用redux。 在「正常」react-native parent-child component我會用簡單的callback來做到這一點。但是，這在此不起作用，因爲modal在router中定義，因此，SomeComp完全獨立。它只有從那裏調用...

Answer 1

有一個非常簡單的解決方案將道具傳遞給父組件goBack()。

您可以將額外的道具包含功能傳遞給Modal，並且在致電goBack()或componentWillUnmount之前，您可以調用該功能。

例

export default class SomeComp extends Component { 
... 

onGoBack = (someDataFromModal) => { 
    console.log(someDataFromModal); 
} 

render() { 
    const { navigate } = this.props; 
    return (
     <TouchableOpacity 
     onPress={navigate("Modal", {data: ..., ..., onGoBack: this.onGoBack})} 
     ..../> 
     ) 
    } 
} 

---

export default class Modal extends Component { 
... 

componentWillUnmount() { 
    if(this.props.navigation.state.params.onGoBack) { 
    this.props.navigation.state.params.onGoBack('I fired from Modal!'); 
    } 
} 

render() { 
    const { data, ... } = this.props.navigation.state.params; 
    const { goBack } = this.props.navigation; 
    return (
     <View> 
      <TouchableOpacity 
      onPress={goBack()} 
      ..../> 
      <Text> 
       {data, ...} 
      </Text> 
     </View> 
     ) 
    } 
}