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

我正在使用react-navigation.我将反应原生组件的道具传递给反击导航模式,反应导航在水龙头上打开.

export default class SomeComp extends Component {
...

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

在模态中我访问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>
       )
    }
}

我不知道的是,是否有可能不使用redux将道具从Modal传递给SomeComp.
在一个“普通的”react-native父子组件中,我会用一个简单的回调来做.但是,这在这里不起作用,因为模态在路由器中定义,因此完全独立于SomeComp.它只从那里打电话……

解决方法:

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

标签：javascript,react-native,router,react-navigation
来源： https://codeday.me/bug/20190608/1195889.html