Hai teman-teman, mari kita coba membuat Lembar Tindakan mirip iOS dengan React Native.

Menyiapkan Proyek React Native.

( Lewati ke bagian selanjutnya, jika sudah selesai.. )

Silakan ke tautan inihttps://reactnative.dev/docs/environment-setup#docsNavdan ikuti langkah-langkah membuat proyek asli reaksi baru.

npx react-native init RNCustomActionSheet

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

Mari kita membuat folder src/actionSheetdan fileindex.js

Ini akan menjadi komponen <ActionSheet/> kita.

Komponen ini memerlukan susunan action itemsstruktur seperti ini:

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

Komponen ini menerima serangkaian item tindakan, menambahkan objek di akhir.

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

Komponen ini ditata sesuai Lembar Tindakan iOS.

Yang harus kita lakukan sekarang adalah membungkus komponen di atas ke dalam <Modal/> dan memposisikannya di bagian bawah layar.

Oke sekarang, mari kita lihat cara kerjanya.

Bekerja dengan baik.
Anda juga dapat melakukan pass actionTextColoruntuk mengubah warna Label.

Ini juga berfungsi dengan baik di Android. Mari kita coba dengan warna teks yang berbeda.

Perpustakaan yang digunakan:

1. Bereaksi Modal Asli

Anda dapat menemukan reponya di sini.

Jika Anda merasa postingan blog ini bermanfaat, bagikan dengan teman.

Jika Anda menemukan kesulitan, silakan tambahkan komentar Anda.