create react native app redux auth
1.0.0
Ini adalah boilerplate app-react-react-native dengan redux & auth lokal & react navigation built-in.
create-react-native-app-redux-auth menghasilkan semua file dasar untuk aplikasi React Native baru dengan redux terhubung (untuk manajemen negara) plus navigasi bereaksi dan otentikasi lokal sepenuhnya dilakukan!
Anda dapat bekerja dengan semua komponen dan API di React Native, serta sebagian besar API JavaScript yang disediakan oleh aplikasi Expo.
create-react-native-app-redux-auth !Tutorial tertulis lengkap dapat ditemukan di sini.
Proyek ini bootstrap dengan Create React Native App dan FSG.
Pastikan Anda memiliki Node V6 atau yang lebih baru diinstal, serta versi klien Expo 2.5.0 saat ini pada perangkat seluler Anda untuk mendukung React Native 0,55. Tidak diperlukan instalasi Xcode atau Android Studio.
$ npm install -g create-react-native-app-redux-auth Alat baris perintah create-react-native-app-redux-auth dapat digunakan dalam beberapa cara yang berbeda.
$ create-react-native-app-redux-auth Cukup menjalankan create-react-native-app-redux-auth dalam direktori membuat sub-folder generated berisi file aplikasi baru Anda.
Atau, create-react-native-app-redux-auth dapat mengambil jalur file (relatif atau absolut, dan bahkan yang belum ada), dan akan menggunakan/membuat folder tujuan dan mengisinya dengan file aplikasi baru Anda.
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer Jika Anda telah membuat dan cd 'D ke dalam direktori, dan ingin mengisinya dengan file aplikasi baru, cukup gunakan . jalur.
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder! Setelah Anda membuat file, pastikan perintah berikut dijalankan dalam root proyek ( generated/ kecuali Anda menggunakan argumen jalur seperti yang dijelaskan di atas):
$ npm installUntuk memulai dengan cepat, cukup ubah 2 hal :
package.json Anda.json, ubah "nama" ke nama aplikasi Anda.IP.js Anda, ubah IP ke alamat IP lengkap backend Anda, apakah itu di localhost:PORT atau tempat yang digunakan, seperti Heroku.Untuk mengaktifkan otentikasi lokal bawaan, proyek yang dihasilkan mengasumsikan database yang sedang berjalan. Anda harus mengonfigurasi server Anda untuk panggilan Redux's Axios:
${IP}/auth/login dengan payload {email: email, kata sandi: kata sandi}.${IP}/auth/signup dengan payload {email: email, kata sandi: kata sandi}.${IP}/auth/logout tanpa payload. $ npm startTerima kasih telah bermain! Hadoken. ?
Di bawah ini Anda akan menemukan informasi tentang melakukan tugas umum. Versi terbaru dari panduan ini tersedia di sini.
Anda hanya perlu memperbarui instalasi global create-react-native-app sangat jarang, idealnya tidak pernah.
Memperbarui ketergantungan react-native-scripts dari aplikasi Anda harus sesederhana menabrak nomor versi dalam package.json dan menginstal ulang dependensi proyek Anda.
Meningkatkan ke versi baru dari React Native membutuhkan memperbarui versi paket react-native , react , dan expo , dan mengatur sdkVersion yang benar di app.json . Lihat Panduan Versi untuk informasi terkini tentang kompatibilitas versi paket.
Jika benang diinstal ketika proyek diinisialisasi, maka dependensi akan diinstal melalui benang, dan Anda mungkin harus menggunakannya untuk menjalankan perintah ini juga. Tidak seperti instalasi ketergantungan, sintaks yang menjalankan perintah identik untuk benang dan NPM pada saat penulisan ini.
npm startMenjalankan aplikasi Anda dalam mode pengembangan.
Buka di aplikasi Expo di ponsel Anda untuk melihatnya. Ini akan memuat ulang jika Anda menyimpan pengeditan ke file Anda, dan Anda akan melihat kesalahan membangun dan log di terminal.
Terkadang Anda mungkin perlu mengatur ulang atau menghapus cache React Native Packager. Untuk melakukannya, Anda dapat meneruskan bendera --reset-cache ke skrip start:
npm start --reset-cache
# or
yarn start --reset-cache
npm testMenjalankan Jest Test Runner pada tes Anda.
npm run ios Seperti npm start , tetapi juga mencoba untuk membuka aplikasi Anda di simulator iOS jika Anda menggunakan Mac dan menginstalnya.
npm run android Seperti npm start , tetapi juga mencoba untuk membuka aplikasi Anda pada perangkat Android yang terhubung atau emulator. Membutuhkan instalasi alat build Android (lihat React Native Docs untuk pengaturan terperinci). Kami juga merekomendasikan untuk menginstal Genymotion sebagai Emulator Android Anda. Setelah Anda selesai menyiapkan lingkungan pembuatan asli, ada dua opsi untuk membuat salinan adb yang tepat tersedia untuk membuat aplikasi Native React:
adbSettings -> ADB . Pilih “Gunakan alat SDK Android khusus” dan perbarui dengan direktori SDK Android Anda. adb Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectIni akan memulai proses "mengeluarkan" dari membuat skrip build aplikasi asli React. Anda akan ditanya beberapa pertanyaan tentang bagaimana Anda ingin membangun proyek Anda.
Peringatan: Menjalankan Eject adalah tindakan permanen (selain dari sistem kontrol versi apa pun yang Anda gunakan). Aplikasi yang dikeluarkan akan mengharuskan Anda untuk menyiapkan lingkungan XCode dan/atau Android Studio.
Anda dapat mengedit app.json untuk memasukkan tombol konfigurasi di bawah tombol expo .
Untuk mengubah nama tampilan aplikasi Anda, atur tombol expo.name di app.json ke string yang sesuai.
Untuk mengatur ikon aplikasi, atur tombol expo.icon di app.json menjadi jalur lokal atau URL. Dianjurkan agar Anda menggunakan file png 512x512 dengan transparansi.
Proyek ini diatur untuk menggunakan JEST untuk tes. Anda dapat mengonfigurasi strategi pengujian apa pun yang Anda sukai, tetapi Jest bekerja di luar kotak. Buat file uji di direktori yang disebut __tests__ atau dengan ekstensi .test agar file dimuat berdasarkan JEST. Lihat Proyek Template untuk Tes Contoh. Dokumentasi Jest juga merupakan sumber yang luar biasa, seperti tutorial pengujian asli React.
Anda dapat mengkonfigurasi beberapa perilaku aplikasi asli React Native menggunakan variabel lingkungan.
Saat memulai proyek Anda, Anda akan melihat sesuatu seperti ini untuk URL proyek Anda:
exp://192.168.0.2:19000
"Manifes" di URL itu memberi tahu aplikasi Expo cara mengambil dan memuat bundel JavaScript aplikasi Anda, jadi bahkan jika Anda memuatnya di aplikasi melalui URL seperti exp://localhost:19000 , aplikasi klien Expo masih akan mencoba mengambil aplikasi Anda di alamat IP yang disediakan oleh skrip awal.
Dalam beberapa kasus, ini kurang dari ideal. Ini mungkin terjadi jika Anda perlu menjalankan proyek Anda di dalam mesin virtual dan Anda harus mengakses paket melalui alamat IP yang berbeda dari yang dicetak secara default. Untuk mengganti alamat IP atau nama host yang terdeteksi oleh Create React Native App, Anda dapat menentukan nama host Anda sendiri melalui variabel lingkungan REACT_NATIVE_PACKAGER_HOSTNAME :
Mac dan Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
Contoh di atas akan menyebabkan server pengembangan mendengarkan di exp://my-custom-ip-address-or-hostname:19000 .
Create React Native App melakukan banyak pekerjaan untuk membuat pengaturan aplikasi dan pengembangan sederhana dan langsung, tetapi sangat sulit untuk melakukan hal yang sama untuk digunakan ke App App Store atau Google Play Store tanpa mengandalkan layanan yang di -host.
Expo menyediakan hosting gratis untuk aplikasi hanya JS yang dibuat oleh CRNA, memungkinkan Anda untuk berbagi aplikasi Anda melalui aplikasi klien Expo. Ini membutuhkan pendaftaran untuk akun Expo.
Instal alat baris perintah exp , dan jalankan perintah publikasi:
$ npm i -g exp
$ exp publish
Anda juga dapat menggunakan layanan seperti Expo's Standalone Builds jika Anda ingin mendapatkan IPA/APK untuk distribusi tanpa harus membangun kode asli sendiri.
Jika Anda ingin membangun dan menggunakan aplikasi Anda sendiri, Anda harus mengeluarkan dari CRNA dan menggunakan Xcode dan Android Studio.
Ini biasanya sesederhana menjalankan npm run eject dalam proyek Anda, yang akan memandu Anda melalui prosesnya. Pastikan untuk menginstal react-native-cli dan ikuti kode asli Panduan Memulai untuk React Native.
Jika Anda telah menggunakan API Expo saat mengerjakan proyek Anda, maka panggilan API tersebut akan berhenti bekerja jika Anda mengeluarkan proyek asli React Native. Jika Anda ingin terus menggunakan API tersebut, Anda dapat mengeluarkan "React Native + Expokit" yang masih memungkinkan Anda untuk membangun kode asli Anda sendiri dan terus menggunakan API Expo. Lihat Panduan Kelaparan untuk detail lebih lanjut tentang opsi ini.
Jika Anda tidak dapat memuat aplikasi Anda di ponsel Anda karena batas waktu jaringan atau koneksi yang ditolak, langkah pertama yang baik adalah memverifikasi bahwa ponsel dan komputer Anda berada di jaringan yang sama dan mereka dapat menjangkau satu sama lain. Buat React Native App membutuhkan akses ke port 19000 dan 19001 jadi pastikan bahwa jaringan dan pengaturan firewall Anda memungkinkan akses dari perangkat Anda ke komputer Anda di kedua port ini.
Coba buka browser web di ponsel Anda dan buka URL yang dicetak oleh skrip Packager, mengganti exp:// dengan http:// . Jadi, misalnya, jika di bawah kode QR di terminal Anda, Anda lihat:
exp://192.168.0.1:19000
Coba buka safari atau chrome di ponsel Anda dan memuat
http://192.168.0.1:19000
Dan
http://192.168.0.1:19001
Jika ini berhasil, tetapi Anda masih tidak dapat memuat aplikasi Anda dengan memindai kode QR, buka masalah pada repositori aplikasi React Native dengan detail tentang langkah -langkah ini dan pesan kesalahan lainnya yang mungkin Anda terima.
Jika Anda tidak dapat memuat URL http di browser web ponsel Anda, coba gunakan fitur Hotspot Tethering/Mobile di ponsel Anda (waspadalah terhadap penggunaan data), menghubungkan komputer Anda ke jaringan WiFi itu, dan memulai kembali Packager. Jika Anda menggunakan VPN, Anda mungkin perlu menonaktifkannya.
Jika Anda menggunakan Mac, ada beberapa kesalahan yang kadang -kadang dilihat pengguna saat mencoba untuk npm run ios :
Ada beberapa langkah yang mungkin ingin Anda ambil untuk memecahkan masalah jenis ini:
Command Line Tools diatur ke sesuatu. Kadang -kadang ketika alat CLI pertama kali diinstal oleh homebrew opsi ini dibiarkan kosong, yang dapat mencegah utilitas apel dari menemukan simulator. Pastikan untuk menjalankan kembali npm/yarn run ios setelah melakukannya.Reset Contents and Settings... Setelah itu selesai, keluar dari simulator, dan menjalankan kembali npm/yarn run ios .Jika Anda tidak dapat memindai kode QR, pastikan kamera ponsel Anda berfokus dengan benar, dan juga memastikan bahwa kontras pada dua warna di terminal Anda cukup tinggi. Misalnya, tema default Webstorm mungkin tidak memiliki kontras yang cukup untuk kode QR terminal untuk dipindai dengan pemindai kode batang sistem yang digunakan aplikasi Expo.
Jika ini menyebabkan masalah bagi Anda, Anda mungkin ingin mencoba mengubah tema warna terminal Anda untuk memiliki lebih banyak kontras, atau menjalankan aplikasi React Native dari terminal yang berbeda. Anda juga dapat secara manual memasukkan URL yang dicetak oleh skrip Packager di bilah pencarian aplikasi Expo untuk memuatnya secara manual.
