javascript - 将 Prop 从 child 传递给 parent react 导航

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() 函数，以及 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 从 Modal 传递给 SomeComp， 不使用redux。在“普通”react-native parent-child component 中，我会用一个简单的callback 来做到这一点。但是，这在这里不起作用，因为 modal 是在 router 中定义的，因此完全独立于 SomeComp。它只能从那里调用...

Answer 1

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

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