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

Question

我对React Native还是很陌生，我觉得这个问题是对React的根本性误解。

我正在尝试通过按下 NavigationBar 按钮打开模式。我正在使用的自定义组件 ("react-native-modal-picker") 和 React Native Modal 都使用子组件来触发事件。我无法弄清楚如何通过按下 rightButton 道具来打开模式。

<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>

我正在尝试确定是否可以调用 open()，它是来自 NavigationBar 组件的 "rightButton" prop 的 ModalPicker 组件的一个函数。

ModalPicker 的组件确实有一个打开的功能，当我将 TouchableHighlight 设为子组件时确实有效，但是如何从子组件 props 中调用该函数？

这是应用程序的主要组件。

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 中调用父组件中的函数？

Is it possible to call a function in a parent component in React Native?

reactjs

react-jsx

react-native