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

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 内部，我访问了关闭modal 的goBack() 函数，以及通过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 down 从Modal 传递到SomeComp，没有 使用redux。 在“正常”react-native parent-child component 中，我会使用简单的callback 来做到这一点。但是，这在这里不起作用，因为modal 是在router 中定义的，因此完全独立于SomeComp。它只是从那里调用...

Answer 1

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

您可以在调用 goBack() 或在 componentWillUnmount 之前将包含函数的额外道具传递给 Modal，您可以调用该函数。

示例

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