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>

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

1 个答案: