将道具从孩子传递到父母的反应导航

Question

我正在使用react-navigation 。 我正在将props从react-native component传递到react-navigation的modal ， react-navigation在水龙头上打开。

export default class SomeComp extends Component {
...

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

在modal内部，我访问goBack()函数，该函数关闭modal以及通过SomeComp传递的props

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 下从Modal到SomeComp ， 而无需使用redux 。 在“正常” react-native parent-child component我将通过一个简单的callback来做到这一点。 但是，这在这里不起作用，因为modal是在router定义的，因此完全独立于SomeComp 。 它只是从那里叫来的...

Answer 1

有一种非常简单的解决方案，可以将道具传回到goBack()上的父组件。

您可以在调用goBack()之前将额外的包含函数的prop传递给Modal，或者在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>
       )
    }
}