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」小道具から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> 

ことによってそれを参照することができます