将道具从小孩带到父母反应导航

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