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

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我内部访问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 下来的Modal到SomeComp,没有使用redux.在"正常"中,react-native parent-child component我会用简单的方法做到这一点callback.但是,这在这里不起作用,因为modal它定义在router,因此,完全独立于SomeComp.它只从那里打电话......

Answer 1

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

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