Sketsa kasar browser web seluler yang dibuat dengan react-native ("omnibar" dan WebView ). Browser berinteraksi dengan API gateway (yang pada akhirnya mungkin saya pasang di GitHub juga) yang bertindak sebagai transportasi untuk protokol terdesentralisasi (saat ini tidak didukung) ( DAT , saat ini).
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )Proyek ini di-bootstrap dengan Create React Native App.
Di bawah ini Anda akan menemukan informasi tentang melakukan tugas-tugas umum. Versi terbaru dari panduan ini tersedia di sini.
Anda hanya perlu sangat jarang memperbarui instalasi global create-react-native-app , idealnya tidak pernah.
Memperbarui dependensi react-native-scripts aplikasi Anda semudah memasukkan nomor versi di package.json dan menginstal ulang dependensi proyek Anda.
Memutakhirkan ke versi baru React Native memerlukan pembaruan versi paket react-native , react , dan expo , serta menyetel sdkVersion yang benar di app.json . Lihat panduan pembuatan versi untuk informasi terkini tentang kompatibilitas versi paket.
Jika Yarn diinstal ketika proyek diinisialisasi, maka dependensi akan diinstal melalui Yarn, dan Anda mungkin harus menggunakannya untuk menjalankan perintah ini juga. Tidak seperti instalasi ketergantungan, sintaksis perintah yang dijalankan identik untuk Yarn dan NPM pada saat penulisan ini.
npm startMenjalankan aplikasi Anda dalam mode pengembangan.
Buka di aplikasi Expo di ponsel Anda untuk melihatnya. Ini akan dimuat ulang jika Anda menyimpan hasil edit ke file Anda, dan Anda akan melihat kesalahan build dan log di terminal.
Terkadang Anda mungkin perlu mengatur ulang atau menghapus cache pembuat paket React Native. Untuk melakukannya, Anda dapat meneruskan tanda --reset-cache ke skrip awal:
npm start --reset-cache
# or
yarn start --reset-cache
npm testJalankan pelari uji jest pada pengujian Anda.
npm run ios Seperti npm start , tetapi juga mencoba membuka aplikasi Anda di Simulator iOS jika Anda menggunakan Mac dan menginstalnya.
npm run android Seperti npm start , tetapi juga mencoba membuka aplikasi Anda di perangkat atau emulator Android yang terhubung. Memerlukan instalasi alat build Android (lihat dokumen React Native untuk pengaturan detail). Kami juga merekomendasikan menginstal Genymotion sebagai emulator Android Anda. Setelah Anda selesai menyiapkan lingkungan build asli, ada dua opsi untuk membuat salinan adb yang tepat tersedia untuk Create React Native App:
adbSettings -> ADB . Pilih “Gunakan alat Android SDK khusus” dan perbarui dengan direktori Android SDK Anda. adb Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectIni akan memulai proses "mengeluarkan" skrip build Create React Native App. Anda akan ditanyai beberapa pertanyaan tentang bagaimana Anda ingin membangun proyek Anda.
Peringatan: Menjalankan eject adalah tindakan permanen (selain sistem kontrol versi apa pun yang Anda gunakan). Aplikasi yang dikeluarkan akan mengharuskan Anda menyiapkan lingkungan Xcode dan/atau Android Studio.
Anda dapat mengedit app.json untuk menyertakan kunci konfigurasi di bawah kunci expo .
Untuk mengubah nama tampilan aplikasi Anda, setel kunci expo.name di app.json ke string yang sesuai.
Untuk menyetel ikon aplikasi, setel kunci expo.icon di app.json menjadi jalur lokal atau URL. Disarankan agar Anda menggunakan file png 512x512 dengan transparansi.
Proyek ini disiapkan untuk menggunakan lelucon untuk pengujian. Anda dapat mengonfigurasi strategi pengujian apa pun yang Anda suka, tetapi lelucon akan berhasil. Buat file pengujian di direktori bernama __tests__ atau dengan ekstensi .test agar file dimuat dengan bercanda. Lihat proyek templat untuk contoh pengujian. Dokumentasi lelucon juga merupakan sumber yang bagus, seperti halnya tutorial pengujian React Native.
Anda dapat mengonfigurasi beberapa perilaku Create React Native App menggunakan variabel lingkungan.
Saat memulai proyek, Anda akan melihat sesuatu seperti ini untuk URL proyek Anda:
exp://192.168.0.2:19000
"Manifes" di URL tersebut memberi tahu aplikasi Expo cara mengambil dan memuat bundel JavaScript aplikasi Anda, jadi meskipun Anda memuatnya di aplikasi melalui URL seperti exp://localhost:19000 , aplikasi klien Expo akan tetap mencoba untuk ambil aplikasi Anda di alamat IP yang disediakan skrip awal.
Dalam beberapa kasus, hal ini kurang dari ideal. Hal ini mungkin terjadi jika Anda perlu menjalankan proyek Anda di dalam mesin virtual dan Anda harus mengakses pembuat paket melalui alamat IP yang berbeda dari alamat IP 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
jendela:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
Contoh di atas akan menyebabkan server pengembangan mendengarkan exp://my-custom-ip-address-or-hostname:19000 .
Create React Native App melakukan banyak pekerjaan untuk membuat pengaturan dan pengembangan aplikasi menjadi sederhana dan mudah, namun sangat sulit melakukan hal yang sama untuk penerapan ke App Store Apple atau Google Play Store tanpa bergantung pada layanan yang dihosting.
Expo menyediakan hosting gratis untuk aplikasi khusus JS yang dibuat oleh CRNA, memungkinkan Anda berbagi aplikasi melalui aplikasi klien Expo. Ini memerlukan pendaftaran untuk akun Expo.
Instal alat baris perintah exp , dan jalankan perintah publikasikan:
$ npm i -g exp
$ exp publish
Anda juga dapat menggunakan layanan seperti versi mandiri Expo jika Anda ingin mendapatkan IPA/APK untuk didistribusikan tanpa harus membuat kode aslinya sendiri.
Jika ingin membuat dan menerapkan aplikasi sendiri, Anda harus mengeluarkan dari CRNA dan menggunakan Xcode dan Android Studio.
Ini biasanya sesederhana menjalankan npm run eject di proyek Anda, yang akan memandu Anda melalui prosesnya. Pastikan untuk menginstal react-native-cli dan ikuti panduan memulai kode asli untuk React Native.
Jika Anda telah menggunakan API Expo saat mengerjakan proyek Anda, maka panggilan API tersebut akan berhenti berfungsi jika Anda mengeluarkan ke proyek React Native biasa. Jika Anda ingin terus menggunakan API tersebut, Anda dapat mengeluarkan ke "React Native + ExpoKit" yang masih memungkinkan Anda membuat kode asli Anda sendiri dan terus menggunakan API Expo. Lihat panduan mengeluarkan untuk rincian lebih lanjut tentang opsi ini.
Jika Anda tidak dapat memuat aplikasi di ponsel karena waktu jaringan habis atau koneksi ditolak, langkah pertama yang baik adalah memverifikasi bahwa ponsel dan komputer Anda berada di jaringan yang sama dan dapat saling menjangkau. Buat Aplikasi React Native memerlukan akses ke port 19000 dan 19001 jadi pastikan pengaturan jaringan dan firewall Anda mengizinkan akses dari perangkat Anda ke komputer Anda di kedua port ini.
Coba buka browser web di ponsel Anda dan buka URL yang dicetak skrip pengemas, ganti exp:// dengan http:// . Jadi, misalnya, jika di bawah kode QR di terminal Anda, Anda melihat:
exp://192.168.0.1:19000
Coba buka Safari atau Chrome di ponsel Anda dan muat
http://192.168.0.1:19000
Dan
http://192.168.0.1:19001
Jika ini berhasil, namun Anda masih tidak dapat memuat aplikasi Anda dengan memindai kode QR, silakan buka terbitan di repositori Create React Native App dengan detail tentang langkah-langkah ini dan pesan kesalahan lain yang mungkin Anda terima.
Jika Anda tidak dapat memuat URL http di browser web ponsel Anda, coba gunakan fitur tethering/hotspot seluler di ponsel Anda (namun berhati-hatilah terhadap penggunaan data), sambungkan komputer Anda ke jaringan WiFi tersebut, dan mulai ulang pembuat paket. Jika Anda menggunakan VPN, Anda mungkin perlu menonaktifkannya.
Jika Anda menggunakan Mac, ada beberapa kesalahan yang terkadang dilihat pengguna saat mencoba npm run ios :
Ada beberapa langkah yang mungkin ingin Anda ambil untuk memecahkan masalah kesalahan semacam ini:
Command Line Tools disetel ke sesuatu. Terkadang saat alat CLI pertama kali diinstal oleh Homebrew, opsi ini dibiarkan kosong, yang dapat mencegah utilitas Apple menemukan simulator. Pastikan untuk menjalankan kembali npm/yarn run ios setelah melakukannya.Reset Contents and Settings... . Setelah selesai, keluar dari Simulator, dan jalankan kembali npm/yarn run ios .Jika Anda tidak dapat memindai kode QR, pastikan kamera ponsel Anda fokus dengan benar, dan pastikan juga kontras pada dua warna di terminal Anda cukup tinggi. Misalnya, tema default WebStorm mungkin tidak memiliki kontras yang cukup agar kode QR terminal dapat dipindai dengan pemindai kode batang sistem yang digunakan aplikasi Expo.
Jika hal ini menimbulkan masalah bagi Anda, Anda mungkin ingin mencoba mengubah tema warna terminal Anda agar lebih kontras, atau menjalankan Create React Native App dari terminal lain. Anda juga dapat memasukkan URL yang dicetak oleh skrip pengemas secara manual di bilah pencarian aplikasi Expo untuk memuatnya secara manual.
