将道具从 child 传递到 parent 反应导航

Question

我正在使用 react-navigation。我正在将 props 从 react-native component 传递到 react-navigation 中的 modal，后者在点击时打开。

export default class SomeComp extends Component {
...

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

在 modal 中，我访问了关闭 modal 的 goBack() 函数，以及通过 SomeComp[=33= 传递的 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。在 "normal" 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>
       )
    }
}

将道具从 child 传递到 parent 反应导航

Pass props from child to parent react navigation

javascript

router

react-native

react-navigation