Ehi gente, proviamo a creare un foglio di azione simile a iOS con React Native.

Configurazione del progetto React Native.

( Passa alla sezione successiva, se già fatto.. )

Vai avanti a questo collegamentohttps://reactnative.dev/docs/environment-setup#docsNave segui i passaggi per creare un nuovo progetto nativo di reazione.

npx react-native init RNCustomActionSheet

return {
 <>
  <View>
  </View>
 <>
}

Creiamo una cartella src/actionSheete un fileindex.js

Questo sarà il nostro componente <ActionSheet/>.

Questo componente richiederà una serie di action itemsstrutture come questa:

{
id: <Unique Id>,
label: '<Label for an action item>',
onPress: () => {
        
         <On Press Callback for the action item>
}
}

Questo componente accetta una serie di azioni e aggiunge un oggetto alla fine.

{
id: '#cancel',
label: 'Cancel',
onPress: props?.onCancel
}

Il componente ha uno stile secondo un foglio di azione iOS.

Tutto quello che dobbiamo fare ora è avvolgere il componente sopra all'interno di un <Modal/> e posizionarlo nella parte inferiore dello schermo.

Ok, ora vediamo come funziona.

Funziona alla grande.
Puoi anche passare actionTextColorper cambiare il colore dell'etichetta.

Funziona bene anche su Android. Proviamolo con il diverso colore del testo.

Librerie utilizzate:

1. Reagire in modo nativo modale

Puoi trovare il repository qui.

Se trovi utile questo post del blog, condividilo con un amico.

Se trovi difficoltà, non esitare ad aggiungere i tuoi commenti.