是否可以在React Native中调用父组件中的函数？

Question

我对React Native仍然很新,我认为这个问题是对React的一个基本误解.

我正试图通过按下NavigationBar按钮打开一个模态.我正在使用的自定义组件("react-native-modal-picker")和React Native Modal都使用子组件来触发事件.我无法弄清楚如何从右按钮道具的印刷机打开模态.

<ModalPicker 
    data = {[
        {key: '1', label: '1'},
        {key: '2', label: '2'},
        {key: '3', label: '3'}
    ]}
    initValue = 'Select option'
    selectStyle={{
        height: 200
    }}>
    <NavigationBar
        title={{ title: "ModalTest" }}
        rightButton={{ title: "Open Modal"
        handler: () => ModalPicker.open() }}
    />
 </ModalPicker>

我正在尝试确定是否可以从NavigationBar组件的"rightButton"prop调用open(),一个ModalPicker组件的函数.

ModalPicker的组件确实有一个打开的功能,当我将一个TouchableHighlight作为一个孩子时它可以工作,但是如何从子组件中调用该函数呢？

这是应用程序的主要组成部分.

Answer 1

您可以用于ref='picker'您的父组件并通过以下方式引用它this.refs.picker

<ModalPicker
    data = {[
        {key: '1', label: '1'},
        {key: '2', label: '2'},
        {key: '3', label: '3'}
    ]}
    ref='picker'
    initValue = 'Select option'
    selectStyle={{
        height: 200
    }}>
    <NavigationBar
        title={{ title: "ModalTest" }}
        rightButton={{ title: "Open Modal",
        handler: () => this.refs.picker.open() }}
    />
 </ModalPicker>