Site icon 2k1

Chạy ứng dụng react native đầu tiên của bạn

Nguyen Pham

Hướng dẫn chạy ứng dụng react-native

React Native là một thư viện mã nguồn mở cho phép bạn xây dựng ứng dụng di động bằng JavaScript và sử dụng các thành phần giao diện người dùng (UI) bản địa. Để hiểu cấu trúc cơ bản của một ứng dụng React Native, bạn cần hiểu một số khái niệm cơ bản của React, như JSX, components, state và props. Nếu bạn đã biết React, bạn vẫn cần học thêm một số điều cụ thể của React Native, như các thành phần bản địa. Bài viết này sẽ hướng dẫn bạn các bước để tạo và chạy một ứng dụng React Native đơn giản.

Cài đặt môi trường phát triển

Để phát triển ứng dụng React Native, bạn cần cài đặt một số công cụ và phần mềm trên máy tính của bạn, bao gồm:

Tạo một ứng dụng React Native

Sau khi đã cài đặt xong môi trường phát triển, bạn có thể tạo một ứng dụng React Native mới bằng lệnh sau:

Lệnh này sẽ tạo ra một thư mục mới với tên ứng dụng của bạn và các tệp tin cần thiết cho ứng dụng. Bạn có thể vào thư mục này bằng lệnh cd <tên ứng dụng>.

Chạy ứng dụng React Native

Để chạy ứng dụng React Native, bạn cần mở máy ảo Android hoặc iOS trên máy tính của bạn hoặc kết nối thiết bị di động của bạn với máy tính qua cáp USB. Sau đó, bạn có thể chạy lệnh sau trong thư mục ứng dụng:

Lệnh này sẽ khởi động một máy chủ phát triển và mở một trình duyệt web với giao diện Expo Dev Tools (nếu sử dụng Expo CLI) hoặc Metro Bundler (nếu sử dụng React Native CLI). Bạn có thể sử dụng các công cụ này để quản lý việc chạy ứng dụng trên các thiết bị khác nhau.

Nếu bạn sử dụng Expo CLI, bạn có thể quét mã QR trên trình duyệt web bằng Expo Go app trên thiết bị di động của bạn để mở ứng dụng. Bạn cũng có thể nhấn phím a để mở ứng dụng trên máy ảo Android hoặc phím i để mở ứng dụng trên máy ảo iOS.

Nếu bạn sử dụng React Native CLI, bạn có thể nhìn thấy ứng dụng đã được cài đặt và chạy trên máy ảo hoặc thiết bị di động của bạn.

Hiểu cơ bản về React Native

Ứng dụng React Native mới của bạn sẽ hiển thị một chữ \”Hello, world!\” trên màn hình. Đây là mã nguồn của ứng dụng:

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

const HelloWorldApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

Hãy phân tích mã nguồn này theo từng phần:


(1) Learn the Basics · React Native. https://reactnative.dev/docs/tutorial.
(2) Introduction · React Native. https://reactnative.dev/docs/getting-started.
(3) React Fundamentals · React Native. https://reactnative.dev/docs/intro-react.

Đây là phần tiếp theo của bản nháp blog hướng dẫn chạy ứng dụng react-native của tôi.

Sử dụng các thành phần React Native

React Native cung cấp cho bạn một số thành phần bản địa sẵn sàng để bạn sử dụng trong ứng dụng của mình. Các thành phần này được ánh xạ trực tiếp đến các thành phần UI bản địa trên cả hai nền tảng Android và iOS. Các thành phần này được tối ưu hóa về hiệu năng và mang lại trải nghiệm người dùng nhất quán trên các nền tảng khác nhau. React Native cũng cho phép bạn tạo các thành phần tùy chỉnh theo nhu cầu của ứng dụng. Bạn có thể tìm thấy tất cả các thành phần bản địa của React Native trong tài liệu.

Các thành phần bản địa của React Native được định nghĩa dưới dạng các hàm hoặc các lớp JavaScript. Khi chạy, React Native sẽ tạo ra các view Android và iOS tương ứng cho các thành phần đó, khiến cho ứng dụng React Native trông, cảm nhận và hoạt động như bất kỳ ứng dụng nào khác. Chúng ta gọi những thành phần này là Native Components.

React Native có nhiều Native Components cho mọi mục đích, từ các điều khiển đến các chỉ báo hoạt động. Bạn có thể tìm thấy chúng được liệt kê trong phần Core Components and APIs. Bạn sẽ làm việc chủ yếu với những Native Components sau:

Trong ví dụ sau, chúng ta sẽ sử dụng một số Native Components để tạo ra một giao diện người dùng đơn giản:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native!</Text>
      <Image style={styles.logo} source={require('./logo.png')} />
      <TextInput style={styles.input} placeholder="Enter your name" />
      <ScrollView style={styles.scroll}>
        <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros vitae leo tincidunt lacinia. Fusce quis lacus ut nisi tincidunt sagittis. Morbi vitae nisl id leo ullamcorper blandit. Donec id lacus in lorem luctus tincidunt. Sed quis augue at lorem malesuada aliquet. Cras quis semper justo, sed aliquam sapien. Ut sit amet massa auctor, mattis leo sed, ultrices nisl. Curabitur euismod, augue vitae ultrices consequat, nisi massa ullamcorper nunc, sit amet consequat leo quam a tellus.</Text>
        <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros vitae leo tincidunt lacinia. Fusce quis lacus ut nisi tincidunt sagittis. Morbi vitae nisl id leo ullamcorper blandit. Donec id lacus in lorem luctus tincidunt. Sed quis augue at lorem malesuada aliquet. Cras quis semper justo, sed aliquam sapien. Ut sit amet massa auctor, mattis leo sed, ultrices nisl. Curabitur euismod, augue vitae ultrices consequat, nisi massa ullamcorper nunc, sit amet consequat leo quam a tellus.</Text>
        <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros vitae leo tincidunt lacinia. Fusce quis lacus ut nisi tincidunt sagittis. Morbi vitae nisl id leo ullamcorper blandit. Donec id lacus in lorem luctus tincidunt. Sed quis augue at lorem malesuada aliquet. Cras quis semper justo, sed aliquam sapien. Ut sit amet massa auctor, mattis leo sed, ultrices nisl. Curabitur euismod, augue vitae ultrices consequat, nisi massa ullamcorper nunc, sit amet consequat leo quam a tellus.</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000',
    margin: 10,
  },
  logo: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  input: {
    width: '80%',
    height: 40,
    borderColor: '#000',
    borderWidth: 1,
    borderRadius: 5,
    margin: 10,
    padding: 10,
  },
  scroll: {
    width: '80%',
    height: '50%',
  },
  text: {
    fontSize: 16,
    color: '#000',
    textAlign: 'justify',
    margin: 10,
  },
});

export default App;

Bạn có thể thấy rằng các thành phần React Native được sử dụng để tạo ra các phần tử giao diện người dùng như văn bản, hình ảnh, khung nhập liệu và khối cuộn.

Trong phần tiếp theo, chúng ta sẽ học về cách sử dụng state và props để quản lý dữ liệu và hành vi của các thành phần React Native.

Source:
(1) All about React Native – How does it work and when to use it. https://clouddevs.com/react/native/.
(2) Core Components and APIs · React Native. https://reactnative.dev/docs/components-and-apis.
(3) Core Components and Native Components · React Native. https://reactnative.dev/docs/intro-react-native-components.
(4) 15+ React Native Component Libraries You Should Know in 2023 – CodeinWP. https://www.codeinwp.com/blog/react-native-component-libraries/.
(5) How to import components in React Native – GeeksforGeeks. https://www.geeksforgeeks.org/how-to-import-components-in-react-native/.

Exit mobile version