È possibile chiamare una funzione in un componente principale in React Native?

Question

Sono ancora molto nuovo per React Native e penso che questa domanda sia un fondamentale fraintendimento di React.

Sto tentando di aprire un modal dalla stampa di un pulsante NavigationBar. Sia il componente personalizzato che sto utilizzando ("react-natal-modal-picker") che React Native Modal utilizzano componenti figlio per attivare l'evento. Non riesco a capire come aprire il modale dalla stampa del puntello destro.

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

Sto cercando di determinare se posso chiamare open(), una funzione del componente ModalPicker dalla prop "rightButton" del componente NavigationBar.

Il componente per ModalPicker ha una funzione da aprire e funziona quando faccio un TouchableHighlight un bambino, ma come si chiama la funzione dall'interno di un componente figlio di oggetti di scena?

Questo è nel componente principale dell'app.

Answer 1

È possibile utilizzare ref='picker' per il componente genitore e fare riferimento ad esso per 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>