React Native untuk Pemula

Ikuti saya di LinkedIn
Ikuti saya di Github.com

Klik & Baca

React Native ialah rangka kerja popular yang dibangunkan oleh Facebook untuk membina aplikasi mudah alih menggunakan JavaScript dan React. Ia membolehkan pembangun membuat apl merentas platform dengan satu pangkalan kod, yang boleh dijalankan pada kedua-dua iOS dan Android. Dalam catatan blog ini, kami akan membincangkan asas React Native, memberikan contoh mudah dan menawarkan petua untuk pemula.

Jadual Kandungan

1. Pengenalan kepada React Native
2. Menyediakan Persekitaran Pembangunan Anda
3. Mencipta Apl Asli React Pertama Anda
4. Memahami Komponen Asli React
5. Menambah Gaya
6. Mengendalikan Negeri dan Acara
7. Petua untuk Pemula
8. Kesimpulan

1. Pengenalan kepada React Native

React Native membolehkan anda membina apl mudah alih menggunakan JavaScript dan React. Ia memanfaatkan komponen asli, yang bermaksud apl akan kelihatan dan berasa seperti apl asli. Salah satu kelebihan terbesar ialah keupayaan untuk berkongsi kod antara iOS dan Android, mengurangkan masa dan usaha pembangunan.

2. Sediakan Persekitaran Pembangunan Anda

Bermula tanpa membosankan

Sebelum anda memulakan pengekodan, anda perlu menyediakan persekitaran pembangunan anda.

Prasyarat

• Node.js dan npm: Muat turun dan pasang Node.js
• Ekspo CLI: npm install -g expo-cli
• Penyunting kod, seperti Kod Visual Studio
• Simulator iOS (memerlukan Xcode) atau Android Emulator (memerlukan Android Studio) untuk ujian

Persediaan Awal

1. Pasang Ekspo CLI:

   npm install -g expo-cli

1. Buat Projek Baharu:

   expo init AwesomeProject
   cd AwesomeProject

1. Mulakan Pelayan Pembangunan:

   expo start

Arahan ini akan memulakan pelayan pembangunan dan membuka tab baharu dalam penyemak imbas anda di mana anda boleh melihat projek anda.

3. Mencipta Apl Asli React Pertama Anda

Mari kita cipta apl "Hello World" yang ringkas.

1. Buka App.js: Fail ini ialah titik masuk utama untuk permohonan anda.
2. Ganti kod sedia ada dengan yang berikut:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

4. Memahami Komponen Asli Bertindak balas

React Native menyediakan satu set komponen terbina dalam yang sepadan dengan komponen UI asli. Berikut ialah beberapa komponen utama:

• Paparan: Komponen asas untuk reka letak dan penggayaan.
• Teks: Digunakan untuk memaparkan teks.
• Imej: Digunakan untuk memaparkan imej.
• Butang: Komponen butang ringkas.

5. Menambah Gaya

Penggayaan dalam React Native dilakukan menggunakan objek JavaScript. Anda boleh menggunakan StyleSheet API untuk mencipta gaya.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

6. Mengendalikan Negeri dan Peristiwa

Anda boleh menggunakan cangkuk useState React untuk mengurus keadaan dan mengendalikan acara seperti klik butang.

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>You clicked {count} times</Text>
      <Button title="Click me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

7. Petua untuk Pemula

• Fahami Asas React: React Native dibina di atas React. Mempunyai pemahaman yang kukuh tentang React akan menjadikan pembelajaran React Native lebih mudah.
• Gunakan Ekspo untuk Pembangunan: Ekspo memudahkan banyak aspek pembangunan React Native, seperti menyediakan persekitaran dan ujian pada peranti fizikal.
• Ikuti Amalan Terbaik: Susun kod anda dengan betul, gunakan nama pembolehubah yang bermakna dan tulis komponen boleh guna semula.
• Pelajari Asas Pembangunan Asli: Mengetahui beberapa asas pembangunan iOS dan Android boleh membantu, terutamanya apabila anda perlu menulis modul asli.

---

Selamat pengekodan!

Atas ialah kandungan terperinci React Native untuk Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!