Untuk menghindari agar gambar pada akhirnya dihapus, kita perlu
menyimpannya di jalur yang lebih permanen di sistem file perangkat lokal kita.
Tentu saja, kami juga dapat mengunggahnya ke server tetapi kami sudah berbicara tentang layanan dan
seterusnya, di sini saya ingin fokus pada semua kemampuan perangkat asli. Sekarang untuk bekerja dengan sistem file asli kita,
expo telah membuat
kita membahasnya, kita dapat menggunakan
paket sistem file di sini untuk melakukan itu. Anda menginstalnya sama seperti Anda menginstal paket asli lainnya,
dengan expo instal
expo-file-system, jadi mari kita lakukan itu di sini, expo instal, sekali lagi hanya pembungkus di sekitar instalasi npm yang
dapat Anda gunakan sebagai alternatif, Anda hanya perlu memastikan Anda Kami menggunakan versi yang tepat untuk versi SDK expo
yang Anda gunakan dan dengan itu, kami telah menginstalnya, sekarang
kami dapat memindahkan gambar setelah kami mengambilnya.
Sekarang ada berbagai tempat di aplikasi di mana kita
bisa melakukan itu, kita bisa melakukannya di pemetik gambar segera setelah kita mengambil gambar tetapi pada
titik waktu ini, kita belum tahu apakah kita benar-benar akan mengirimkan formulir, jika kami benar-benar menyimpan gambar itu.
Jadi bagaimana jika kita hanya mengambil gambar di sini tapi kemudian kita membuang ini dan kita kembali?
Saya tidak ingin gambar dipindahkan ke tempat permanen dalam kasus itu, itu pasti harus dibersihkan dan
itu adalah perilaku default, jadi saya tidak ingin memindahkannya pada saat
ini, sebagai
gantinya saya ingin memindahkannya setelah kami mengirimkan formulir.
Oleh karena itu kita bisa melakukannya di sini di layar tempat baru, di save place
handler tapi kemudian kita akan menambahkan semua logika sistem file ini ke komponen ini yang mungkin tetapi yang menambahkan banyak
logika ke dalam komponen ini yang saya tidak benar-benar ingin
sudah ada, saya ingin menjaga komponen ini relatif ramping.
Namun tempat yang tepat untuk ini adalah pencipta aksi.
Kami telah menggunakan ini di masa lalu untuk memiliki efek samping, seperti mengirim permintaan HTTP.
Sekarang memindahkan file pada dasarnya adalah kategori yang sama dengan yang kami lakukan, alih-alih mengirim permintaan ke
server,
kami memindahkan file,
nah itu tidak jauh berbeda.
Jadi karena itu di file ini di sini, di tempat-tindakan. js file, saya akan mengimpor semuanya sebagai filesystem dari sistem file
expo, jadi dari paket baru ini kami instal dan di sini di tambah tempat, sekarang saya akan menggunakan
sintaks alternatif pengiriman ini atau memiliki pencipta tindakan yang menggunakan Redux Thunk, di mana kami mengembalikan fungsi internal
di sini yang menerima fungsi pengiriman sebagai argumen sehingga dalam fungsi internal ini, kita dapat mengirim tindakan
ini dengan memanggil pengiriman di sini dan melewati objek tindakan kita dan saya akan menambahkan async di sini sehingga kita dapat menggunakan async menunggu karena kita akan
melakukan beberapa pekerjaan asinkron di sini. Di sini, saya sekarang ingin
memindahkan file, kan?
Jadi untuk itu, saya ingin menggunakan paket sistem file ini. Sekarang memindahkan file sebenarnya melibatkan beberapa
hal.
Pertama-tama, kita perlu mendapatkan path baru dari file tersebut dan itu tentu
saja harus menjadi direktori yang lebih permanen. Untuk itu, kita dapat menggunakan sistem file dan di sana, Anda memiliki beberapa direktori yang dapat Anda akses.
Anda mendapat direktori cache yang sebenarnya adalah direktori di mana file tersebut
sudah disimpan di luar kotak, direktori bundel yang sebenarnya bukan direktori yang baik untuk menyimpan file yang digunakan aplikasi Anda, tetapi
Anda juga mendapat direktori dokumen, ini
adalah direktori utama untuk semua file yang dibutuhkan aplikasi Anda yang dijamin untuk bertahan hidup.
Sekarang ketika Anda menghapus aplikasi Anda, folder ini juga akan dihapus,
sehingga file-file ini hilang tetapi sampai saat itu, mereka akan bertahan di seluruh restart aplikasi, melintasi jeda panjang di mana orang belum
menggunakan aplikasi Anda,
jadi di sini file akan bertahan.
Jadi direktori dokumen sistem file adalah jalur yang ingin saya pindahkan file saya dan sekarang ada satu
hal penting yang perlu diketahui, jalur Anda juga perlu menyertakan nama file yang ingin Anda gunakan di masa depan.
Tentu saja, Anda juga mendapatkan nama file sementara ketika Anda mengambil gambar tetapi ketika Anda memindahkan file, nama ini sebenarnya tidak disimpan di luar
kotak, alih-alih itu akan menganggap jalur ini di sini sebagai nama yang bisa dikatakan. Jadi karena itu ini seharusnya tidak hanya menjadi
pointer di folder yang ingin Anda pindahkan file,
itu juga harus menyertakan nama file.
Sekarang untuk itu, saya senang dengan menjaga nama gambar yang
di-autogenerasi, tentu saja Anda juga bisa sekarang menghasilkan nama gambar unik Anda sendiri di sini, tetapi untuk itu, saya akan mengambil
nama file dari gambar yang saya
dapatkan di sini, perlu diingat gambar di sini adalah jalan, jalur sementara ke gambar.
Jadi di sini, saya akan benar-benar menggunakan gambar yang merupakan string dan panggilan split pada ini untuk membaginya
dengan garis miring karena jalur ini tentu saja melibatkan beberapa garis miring pada akhirnya dan split mengubah string ini menjadi array
segmen string di mana setiap segmen adalah segmen sebelum dan sesudah slash di string dan di sana
dengan memanggil pop,
saya mendapatkan segmen terakhir.
Jadi apa yang dilakukan kode ini di sini adalah melihat jalur gambar kita, membaginya dengan memangkas jenis apa yang membentuk
jalur penuh kita di sana dan dengan membuka elemen terakhir, nah
apa elemen terakhir? Itu nama file
kami, benar, jadi jika Anda memiliki path seperti folder / gambar lain. jpg, lalu apa yang kita lakukan dengan split adalah kita
mendapatkan array dengan beberapa folder dan dengan myimage. jpg dan dengan memanggil pop pada ini, kita mendapatkan
myimage. jpg, jadi
itulah yang kita dapatkan di sini.
Jadi ini akan mengembalikan nama file
kita, potongan kode ini di sini dan sekarang kita dapat menambahkan ini di sini ke jalur kita dengan hanya menambahkannya seperti ini.
Jadi sekarang ini menghasilkan path yang keduanya termasuk folder dan kemudian nama file.
Di sinilah saya ingin memindahkan file itu dan sekarang kita dapat memindahkannya dengan mengakses FileSystem. moveAsync.
Itu adalah metode yang memindahkan file dari a ke b dan
itu juga menggunakan janji karena memindahkan file itu bisa memakan waktu sedikit lebih lama dan karena itu akan memberi tahu
kita ketika sudah selesai.
Sekarang memindahkan async mengambil objek dengan dua potong informasi - dari dan yang cukup mudah
saya kira.
Jadi dari adalah gambar karena gambar adalah jalur ke direktori sementara, jadi dari situ, dari situlah file saat ini
duduk dan tentu saja adalah jalur baru kita, seperti ini. Sekarang seperti yang saya katakan, ini mengembalikan
janji sehingga kita bisa menunggu ini dan hanya itu.
Sekarang kita harus membungkus ini menjadi blok coba tangkap karena ini bisa gagal
karena misalnya tidak ada cukup ruang pada perangkat atau entah bagaimana kita memiliki kesalahan izin atau hal lain salah.
Jadi kita harus mencoba menangkap tindakan filesystem kita karena operasi pada filesystem selalu dapat gagal dan di sana kita mungkin ingin
melakukan
sesuatu, di sini saya mencatat kesalahan dan saya
rethrowing tetapi tentu saja Anda dapat melakukan hal-hal lain di sana sebagai baik, Anda dapat
menyimpan ini di server analytics Anda sendiri, apa pun yang perlu Anda lakukan.
Sekarang Anda akhirnya mungkin ingin menangani ini dalam komponen juga untuk menunjukkan peringatan di sana, saya tidak
akan melakukannya tetapi Anda akan menanganinya dengan cara yang sama seperti yang Anda lakukan misalnya menangani kesalahan
HTTP yang merupakan sesuatu
yang saya lihat di modul HTTP.
Jadi di sini, kami mengasumsikan bahwa ini sebagian besar akan berhasil atau ini akan selalu berhasil dan kami
sedang memindahkan file. Sekarang setelah
dipindahkan, kita tahu itu akan berada di jalur baru,
jadi tentu saja itu jalur baru yang sekarang ingin saya simpan di sini di data tempat
saya atau di toko Redux saya. Itu semua bagus, ini seharusnya
menyimpan gambar kita di direktori permanen tetapi yang
tidak kita lakukan adalah kita tidak menyimpan data kita sendiri di tempat permanen.
Kami tentu saja menggunakan Redux di sini dan itu berarti itu disimpan dalam memori tetapi setiap kali kami
menutup dan memulai ulang aplikasi kami, semua data kami akan hilang karena itu tidak disimpan di perangkat atau di server atau di
database, itu hanya di memori yang aktif selama aplikasi kami berjalan dan setelah itu dihapus.
Jadi sebagai langkah selanjutnya, saya ingin menunjukkan kepada Anda cara menggunakan SQLite yang merupakan basis data perangkat, keduanya tersedia di iOS
dan Android, untuk menyimpan lebih dari sekadar file tetapi juga menyimpan data kami, seperti judul dan jalur
gambar dan begitu seterusnya.