将道具从子级传递给父级反应导航

我在用react-navigation。我正在路过propsfrom a react-native component to the modal from react-navigation用水龙头打开。

export default class SomeComp extends Component {
...

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

在 - 的里面modal我访问goBack()关闭函数modal，以及props通过传递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 down from Modal to SomeComp, without using redux。 在“正常”的情况下react-native parent-child component我会用一个简单的方法来做到这一点callback。然而，这在这里不起作用，因为modal定义在router，因此，完全独立于SomeComp。它只能从那里调用......

有一个非常简单的解决方案可以将 props 传递回父组件goBack().

您可以在调用之前将包含函数的额外道具传递给 ModalgoBack() or in componentWillUnmount你可以调用该函数。

Example

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