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的{{1}}函数，以及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。在＆＃34;正常＆＃34; react-native parent-child component我会用一个简单的callback做到这一点。但是，这在此处不起作用，因为modal中定义了router，因此完全独立于SomeComp。它只从那里打来......

Answer 1

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

{{1}}

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

1 个答案: