Passer les accessoires de l'enfant au parent réagissent à la navigation

Question

J'utilise react-navigation. Je passe props d'un react-native component au modal de react-navigation qui est ouvert sur un robinet.

export default class SomeComp extends Component { 
... 

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

A l'intérieur du modal-je accéder à la fonction goBack() qui ferme la modal, ainsi que le props passé par 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> 
     ) 
    } 
} 

Ce que je me demande est, si son possible ou non de passer propsvers le bas de Modal à SomeComp, sans en utilisant redux. Dans un "normal" react-native parent-child component je le ferais avec un simple callback. Cependant, cela ne fonctionne pas ici, car le modal est défini dans le router, par conséquent, complètement indépendant de SomeComp. Son seul appelé à partir de là ...

Answer 1

Il existe une solution très simple pour renvoyer les accessoires au composant parent sur goBack().

Vous pouvez passer une fonction contenant un accessoire supplémentaire à Modal et juste avant d'appeler goBack() ou componentWillUnmount vous pouvez appeler cette fonction.

Exemple

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> 
     ) 
    } 
}