React Native chạy trên React , một thư viện mã nguồn mở phổ biến để xây dựng giao diện người dùng với JavaScript. Để tận dụng tối đa React Native, bạn cần hiểu chính React. Phần này có thể giúp bạn bắt đầu hoặc có thể dùng như một khóa học bồi dưỡng.

Chúng ta sẽ đề cập đến các khái niệm cốt lõi đằng sau React:

  • components
  • JSX
  • props
  • state

Nếu bạn muốn tìm hiểu sâu hơn, chúng tôi khuyến khích bạn xem tài liệu chính thức của React .

Thành phần đầu tiên của bạn 

Phần còn lại của phần giới thiệu React này sử dụng mèo trong các ví dụ của nó: những sinh vật thân thiện, dễ gần cần có tên và một quán cà phê để làm việc. Đây là thành phần Cat đầu tiên của bạn:

 

Đây là cách bạn thực hiện: Để xác định Catthành phần của bạn , trước tiên hãy sử dụng JavaScript importđể nhập TextThành phần cốt lõi của React và React Native :

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

Thành phần của bạn bắt đầu dưới dạng một hàm:

const Cat = () => {};

Bạn có thể coi các thành phần là bản thiết kế. Bất cứ điều gì một thành phần hàm trả về đều được hiển thị dưới dạng một phần tử React. Phần tử React cho phép bạn mô tả những gì bạn muốn xem trên màn hình.

Ở đây Catcomponent sẽ hiển thị một <Text>phần tử:

const Cat = () => {
return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

Bạn có thể xuất thành phần chức năng của mình bằng JavaScript export defaultđể sử dụng trong toàn bộ ứng dụng của mình như sau:

const Cat = () => {
return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

Đây là một trong nhiều cách để xuất thành phần của bạn. Loại xuất này hoạt động tốt với Snack Player. Tuy nhiên, tùy thuộc vào cấu trúc tệp của ứng dụng, bạn có thể cần sử dụng một quy ước khác. Cheatsheet tiện dụng này về nhập và xuất JavaScript có thể giúp ích.

Bây giờ hãy xem xét kỹ hơn returntuyên bố đó . <Text>Hello, I am your cat!</Text>đang sử dụng một loại cú pháp JavaScript giúp việc viết các phần tử trở nên thuận tiện: JSX.

Class components có xu hướng dài dòng hơn một chút so với function components.

Bạn cũng nhập thêm Componenttừ React:

import React, { Component } from 'react';

Thành phần của bạn bắt đầu dưới dạng một lớp mở rộng Componentthay vì dưới dạng một hàm:

class Cat extends Component {}

Các thành phần lớp có một render()chức năng. Bất cứ thứ gì được trả về bên trong nó sẽ được hiển thị dưới dạng một phần tử React:

class Cat extends Component {
  render() {
       return <Text>Hello, I am your cat!</Text>;
  }
}

Và như với các thành phần chức năng, bạn có thể xuất thành phần lớp của mình:

class Cat extends Component {
    render() {
       return <Text>Hello, I am your cat!</Text>;
    }
}

export default Cat;

Đây là một trong nhiều cách để xuất thành phần của bạn.Loại xuất này hoạt động tốt với Snack Player.Tuy nhiên, tùy thuộc vào cấu trúc tệp của ứng dụng, bạn có thể cần sử dụng một quy ước khác.Cheatsheet tiện dụngnàyvề nhập và xuất JavaScriptcó thể giúp ích.

Bây giờ hãy xem xét kỹ hơnreturntuyên bốđó.<Text>Hello, I am your cat!</Text>đang sử dụng một loại cú pháp JavaScript giúp việc viết các phần tử trở nên thuận tiện: JSX.

JSX

Phản ứng và phản ứng sử dụng Native JSX, một cú pháp cho phép bạn viết các yếu tố bên trong JavaScript như vậy: <Text>Hello, I am your cat!</Text>. Tài liệu React có hướng dẫn toàn diện về JSX, bạn có thể tham khảo để tìm hiểu thêm. Vì JSX là JavaScript nên bạn có thể sử dụng các biến bên trong nó. Ở đây bạn đang khai báo tên cho con mèo namevà nhúng nó với dấu ngoặc nhọn bên trong <Text>.

Mọi biểu thức JavaScript sẽ hoạt động giữa các dấu ngoặc nhọn, bao gồm các lệnh gọi hàm như {getFullName("Rum", "Tum", "Tugger")}:

Bạn có thể coi dấu ngoặc nhọn giống như việc tạo một cổng thông tin vào chức năng JS trong JSX của bạn!

Vì JSX được bao gồm trong thư viện React, nó sẽ không hoạt động nếu bạn không có import React from 'react'ở đầu tệp của mình!

Thành phần tùy chỉnh 

Bạn đã gặp các Thành phần cốt lõi của React Native . React cho phép bạn lồng các thành phần này vào bên trong nhau để tạo các thành phần mới. Các thành phần có thể lồng ghép, có thể tái sử dụng này là trung tâm của mô hình React.

Ví dụ: bạn có thể lồng nhau Textvà TextInputbên trong một Viewbên dưới và React Native sẽ kết xuất chúng lại với nhau:

Trên Android, bạn thường đặt quan điểm của mình bên trong LinearLayoutFrameLayoutRelativeLayout, vv để xác định cách trẻ em của view sẽ được sắp xếp trên màn hình. Trong React Native, Viewsử dụng Flexbox cho bố cục dành cho trẻ em của nó. Bạn có thể tìm hiểu thêm trong hướng dẫn của chúng tôi về bố cục với Flexbox .

Bạn có thể hiển thị thành phần này nhiều lần và nhiều nơi mà không cần lặp lại mã của mình bằng cách sử dụng <Cat>:

Bất kỳ thành phần nào kết xuất các thành phần khác là thành phần mẹ. Đây, Cafelà thành phần cha và mỗi thành phần Catlà một thành phần con.

Bạn có thể đặt bao nhiêu con mèo trong quán cà phê của mình tùy thích. Mỗi <Cat>phần tử hiển thị một phần tử duy nhất — mà bạn có thể tùy chỉnh bằng các props.

Props

Props là viết tắt của “thuộc tính”. Props cho phép bạn tùy chỉnh các thành phần React. Ví dụ, ở đây bạn vượt qua mỗi <Cat>một khác nhau namecho Catđến render:

Hầu hết các Thành phần cốt lõi của React Native cũng có thể được tùy chỉnh bằng các props. Ví dụ: khi sử dụng Image, bạn chuyển nó một chỗ dựa có tên sourceđể xác định hình ảnh mà nó hiển thị:

Imagecó nhiều props khác nhau , bao gồm style, chấp nhận một đối tượng JS của các cặp giá trị thuộc tính liên quan đến thiết kế và bố cục.

Chú ý dấu ngoặc nhọn kép {{ }}xung quanh stylechiều rộng và chiều cao của. Trong JSX, các giá trị JavaScript được tham chiếu với {}. Đây là thuận tiện nếu bạn đang đi qua một cái gì đó khác hơn là một chuỗi như props, như một mảng hoặc số: <Cat food={["fish", "kibble"]} age={2} />. Tuy nhiên, các đối tượng JS được cũng thể hiện bằng dấu ngoặc nhọn: {width: 200, height: 200}. Do đó, để truyền một đối tượng JS trong JSX, bạn phải bọc đối tượng trong một cặp dấu ngoặc nhọn khác:{{width: 200, height: 200}}

Bạn có thể xây dựng nhiều điều với props và các thành phần cốt lõi TextImagevà View! Nhưng để xây dựng một cái gì đó tương tác, bạn sẽ cần trạng thái.

State

Mặc dù bạn có thể coi các props là đối số mà bạn sử dụng để định cấu hình cách các thành phần hiển thị, trạng thái giống như một bộ lưu trữ dữ liệu cá nhân của thành phần. Trạng thái hữu ích để xử lý dữ liệu thay đổi theo thời gian hoặc dữ liệu đến từ tương tác của người dùng. State cung cấp cho bộ nhớ các thành phần của bạn!

Theo quy tắc chung, hãy sử dụng props để định cấu hình một thành phần khi nó hiển thị. Sử dụng trạng thái để theo dõi bất kỳ dữ liệu thành phần nào mà bạn muốn thay đổi theo thời gian.

Ví dụ sau đây diễn ra trong một quán cà phê mèo, nơi có hai con mèo đói đang chờ được cho ăn. Cơn đói của họ, mà chúng ta mong đợi sẽ thay đổi theo thời gian (không giống như tên của họ), được lưu trữ dưới dạng trạng thái. Để cho mèo ăn, hãy nhấn các nút của chúng — nút này sẽ cập nhật trạng thái của chúng.

Bạn có thể thêm trạng thái vào một thành phần bằng cách gọi React’s useStateHook . Hook là một loại chức năng cho phép bạn “tham gia vào” các tính năng của React. Ví dụ, useStatelà một Hook cho phép bạn thêm trạng thái vào các thành phần hàm. Bạn có thể tìm hiểu thêm về các loại Hook khác trong tài liệu React.

Đầu tiên, bạn sẽ muốn nhập useStatetừ React như sau:

import React, { useState } from 'react'

Sau đó, bạn khai báo trạng thái của thành phần bằng cách gọi useStatebên trong hàm của nó. Trong ví dụ này, hãy useStatetạo một isHungrybiến trạng thái:

const Cat = (props) => {
const [isHungry, setIsHungry] = useState(true);
// ...
};

Bạn có thể sử dụng useStateđể theo dõi bất kỳ loại dữ liệu nào: chuỗi, số, Boolean, mảng, đối tượng. Ví dụ, bạn có thể theo dõi số lần một con mèo được cưng nựng const [timesPetted, setTimesPetted] = useState(0)!

Gọi điện useStatethực hiện hai điều:

  • nó tạo ra một “biến trạng thái” với giá trị ban đầu — trong trường hợp này là biến trạng thái isHungryvà giá trị ban đầu của nó làtrue
  • nó tạo ra một hàm để đặt giá trị của biến trạng thái đó—setIsHungry

Bạn sử dụng tên gì không quan trọng. Nhưng có thể hữu ích khi nghĩ về mô hình như [<getter>, <setter>] = useState(<initialValue>).

Tiếp theo, bạn thêm ButtonThành phần cốt lõi và cung cấp cho nó một chỗ dựa onPress:

<Button
onPress={() => {
setIsHungry(false);
}}
//..
/>

Bây giờ, khi ai đó nhấn nút,onPresssẽ kích hoạt, gọisetIsHungry(false).Điều này đặt biến trạng tháiisHungrythànhfalse.KhiisHungrysai, giá trịButtoncủadisabledđược đặt thànhtruevà nótitlecũng thay đổi:

<Button
//..
disabled={!isHungry}
title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
/>

Bạn có thể nhận thấy rằng mặc dù isHungrylà một const , nó dường như có thể chuyển nhượng lại! Điều gì đang xảy ra là khi một hàm thiết lập trạng thái như setIsHungryđược gọi, thành phần của nó sẽ hiển thị lại. Trong trường hợp này, Cathàm sẽ chạy lại — và lần này, useStatesẽ cho chúng ta giá trị tiếp theo của isHungry.

Cuối cùng, đặt những con mèo của bạn vào trong một Cafethành phần:

const Cafe = () => {
        return (
          <>
           <Cat name="Munkustrap" />
           <Cat name="Spot" />
          </>
          );
};
Xem <>và </>ở trên? Các bit này của JSX là các phân đoạn . Các phần tử JSX liền kề phải được bao bọc trong một thẻ bao quanh. Các phân đoạn cho phép bạn làm điều đó mà không cần lồng một phần tử bao bọc thừa, không cần thiết như View.

Bây giờ bạn đã bao gồm cả Thành phần cốt lõi của React và React Native, hãy đi sâu hơn về một số thành phần cốt lõi này bằng cách xem xét xử lý<TextInput> .

Cách tiếp cận các class components cũ có một chút khác biệt khi nói về trạng thái.

Như mọi khi với các thành phần lớp, bạn phải nhập Componentlớp từ React:

 import React, { Component } from 'react';

Trong các thành phần lớp, trạng thái được lưu trữ trong một đối tượng trạng thái:

export class Cat extends Component {
state = { isHungry: true };
//..
}

Giống như khi truy cập các props bằng this.props, bạn truy cập đối tượng này bên trong thành phần của mình bằng this.state:

<Text>
I am {this.props.name}, and I am
{this.state.isHungry ? ' hungry' : ' full'}!
</Text>

Và bạn đặt các giá trị riêng lẻ bên trong đối tượng trạng thái bằng cách chuyển một đối tượng có cặp giá trị khóa cho trạng thái và giá trị mới của nó thànhthis.setState():

<Button
onPress={() => {
this.setState({ isHungry: false });
}}
// ..
</Button>

Không thay đổi trạng thái thành phần của bạn trực tiếp bằng cách gán cho nó một giá trị mới vớithis.state.hunger = false.Việc gọithis.setState()cho phép React theo dõi các thay đổi được thực hiện đối với trạng thái kích hoạt kết xuất.Đặt trạng thái trực tiếp có thể phá vỡ khả năng phản ứng của ứng dụng!

Khithis.state.isHungrysai, giá trịButtoncủa ‘sdisabledđược đặt thànhfalsevà nótitlecũng thay đổi:

<Button
// ..
disabled={!this.state.isHungry}
title={
this.state.isHungry
? 'Pour me some milk, please!'
: 'Thank you!'
}
/>

Cuối cùng, đặt những con mèo của bạn vào trong một Cafethành phần:

class Cafe extends Component {
render() {
return (
<>
<Cat name="Munkustrap" />
<Cat name="Spot" />
</>
);
}
}

export default Cafe;

Xem <>và </>ở trên? Các bit này của JSX là các phân đoạn . Các phần tử JSX liền kề phải được bao bọc trong một thẻ bao quanh. Các phân đoạn cho phép bạn làm điều đó mà không cần lồng một phần tử bao bọc thừa, không cần thiết như View.


Bây giờ bạn đã bao gồm cả Thành phần cốt lõi của React và React Native, hãy đi sâu hơn về một số thành phần cốt lõi này bằng cách xem xét xử lý<TextInput> .

Xin chào

Hi mn mình là baladken đây. Hiện tại mình là một “Nhặt trình viên” à nhầm là một “Lập trình viên” chân chính.

About Baladken

FullName: Nguyễn Minh Phương

DOB: 1999

Born: Lập Thạch – Vĩnh phúc

Phone: 0334924xxx
Email: phuongnmd00539@fpt.edu.vn