Share via

Mulai mengembangkan untuk Android menggunakan React Native

  • Artikel

Panduan ini akan membantu Anda mulai menggunakan React Native di Windows untuk membuat aplikasi lintas platform yang akan berfungsi di perangkat Android.

Gambaran Umum

React Native adalah kerangka kerja aplikasi seluler sumber terbuka yang dibuat oleh Facebook. Ini digunakan untuk mengembangkan aplikasi untuk Android, iOS, Web, dan UWP (Windows) yang menyediakan kontrol UI asli dan akses penuh ke platform asli. Bekerja dengan React Native memerlukan pemahaman tentang dasar-dasar JavaScript.

Mulai menggunakan React Native dengan menginstal alat yang diperlukan

  1. Instal Visual Studio Code (atau editor kode pilihan Anda).

  2. Instal Android Studio untuk Windows. Android Studio menginstal Android SDK terbaru secara default. React Native memerlukan Android 6.0 (Marshmallow) SDK atau yang lebih baru. Sebaiknya gunakan SDK terbaru.

  3. Buat jalur variabel lingkungan untuk Java SDK dan Android SDK:

    • Di menu pencarian Windows, masukkan: "Edit variabel lingkungan sistem", ini akan membuka jendela Properti Sistem.
    • Pilih Variabel Lingkungan... lalu pilih Baru... di bawah Variabel pengguna.
    • Masukkan Nama variabel dan nilai (jalur). Jalur default untuk Java dan Android SDK adalah sebagai berikut. Jika Anda telah memilih lokasi tertentu untuk menginstal Java dan Android SDK, pastikan untuk memperbarui jalur variabel yang sesuai.
      • JAVA_HOME: C:\Program Files\Android\Android Studio\jre\bin
      • ANDROID_HOME: C:\Users\username\AppData\Local\Android\Sdk

    Screenshot of adding environmental variable path

  4. Instal NodeJS untuk Windows Anda mungkin ingin mempertimbangkan untuk menggunakan Node Version Manager (nvm) untuk Windows jika Anda akan bekerja dengan beberapa proyek dan versi NodeJS. Sebaiknya instal versi LTS terbaru untuk proyek baru.

Catatan

Anda mungkin juga ingin mempertimbangkan untuk menginstal dan menggunakan Terminal Windows untuk bekerja dengan antarmuka baris perintah (CLI) pilihan Anda, serta Git untuk kontrol versi. Java JDK dilengkapi dengan Android Studio v2.2+, tetapi jika Anda perlu memperbarui JDK Anda secara terpisah dari Android Studio, gunakan Windows x64 Installer.

Membuat proyek baru dengan React Native

  1. Gunakan npx, alat pelari paket yang diinstal dengan npm untuk membuat proyek React Native baru. dari Prompt Perintah Windows, PowerShell, Terminal Windows, atau terminal terintegrasi di Visual Studio Code (Lihat > Terminal Terintegrasi).

    npx react-native init MyReactNativeApp

    Jika Anda ingin memulai proyek baru dengan versi React Native tertentu, Anda dapat menggunakan --version argumen . Untuk informasi tentang versi React Native, lihat Versi - React Native.

    npx react-native@X.XX.X init  <projectName> --version X.XX.X

  2. Buka direktori "MyReactNativeApp" baru Anda:

    cd MyReactNativeApp

  3. Jika Anda ingin menjalankan proyek di perangkat Android perangkat keras, sambungkan perangkat ke komputer Anda dengan kabel USB.

  4. Jika Anda ingin menjalankan proyek di emulator Android, Anda tidak perlu mengambil tindakan apa pun saat Android Studio menginstal dengan emulator default yang diinstal. Jika Anda ingin menjalankan aplikasi di emulator untuk perangkat tertentu. Klik tombol AVD Manager di toolbar.

    Screenshot of the AVD Manager button.

  5. Untuk menjalankan proyek Anda, masukkan perintah berikut. Ini akan membuka jendela konsol baru yang menampilkan Node Metro Bundler.

    npx react-native run-android

    Screenshot of Metro Bundler in a console window

    Screenshot of the default React Native app running in an Android emulator

    Catatan

    Jika Anda menggunakan penginstalan baru Android Studio dan belum melakukan pengembangan Android lainnya, Anda mungkin mendapatkan kesalahan di baris perintah saat menjalankan aplikasi tentang menerima lisensi untuk Android SDK. Seperti "Peringatan: Lisensi untuk paket Android SDK Platform 29 tidak diterima." Untuk mengatasinya, Anda dapat mengklik tombol SDK Manager di Android Studio Screenshot of the SDK Manager button. Atau, Anda dapat mencantumkan dan menerima lisensi dengan perintah berikut, memastikan untuk menggunakan jalur ke lokasi SDK di komputer Anda.

    C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses

  6. Untuk memodifikasi aplikasi, buka MyReactNativeApp direktori proyek di IDE pilihan Anda. Kami merekomendasikan VISUAL Code atau Android Studio.

  7. Templat proyek yang dibuat dengan react-native init menggunakan halaman utama bernama App.js. Halaman ini telah diisi sebelumnya dengan banyak tautan berguna ke informasi tentang pengembangan React Native. Tambahkan beberapa teks ke elemen Teks pertama, seperti string "HELLO WORLD!" yang ditunjukkan di bawah ini.

    <Text style={styles.sectionDescription}>
  Edit <Text style={styles.highlight}>App.js</Text> to change this
  screen and then come back to see your edits. HELLO WORLD!
</Text>

  8. Muat ulang aplikasi untuk menampilkan perubahan yang Anda buat. Ada beberapa cara untuk melakukan ini.

    • Di jendela konsol Metro Bundler, ketik "r".
    • Di emulator perangkat Android, ketuk dua kali "r" di keyboard Anda.
    • Pada perangkat android perangkat keras, kocok perangkat untuk memunculkan menu debug React Native dan pilih 'Muat Ulang'. Screenshot of the React Native debug menu

Sumber Daya Tambahan: