Expo là một bộ công cụ giúp dễ dàng viết các ứng dụng React Native. Trong bài này, tôi sẽ hướng dẫn cho bạn cách bạn có thể nhanh chóng tạo ra các ứng dụng React Native bằng Expo.
Với Expo, các nhà phát triển có thể tạo ra các ứng dụng React Native mà không gặp bất kỳ sự phiền toái nào giống như khi cài đặt và cấu hình các phần mềm phụ trợ như Android Studio, Xcode hoặc tất cả các công cụ khác cần thiết để phát triển và chạy ứng dụng React Native.
Trong này, tôi sẽ hướng dẫn cho bạn cách viết một trò chơi trí nhớ đơn giản bằng Expo. Cùng với đó bạn sẽ được tìm hiểu về những kiến thức sau đây:
- Cách sử dụng các công cụ do Expo cung cấp. Chúng bao gồm CLI, SDK và ứng dụng Expo client.
- Cách tạo ứng dụng React Native bằng Expo.
Expo là gì?
Expo là một framework dùng để phát triển nhanh các ứng dụng React Native. Nó giống như Laravel hay Symphony cho các nhà phát triển PHP, hoặc Ruby on Rails cho các nhà phát triển Ruby. Expo cung cấp một lớp nằm trên cùng của React Native API để giúp chúng dễ sử dụng và quản lý. Nó còn cung cấp các công cụ giúp bạn dễ dàng khởi tạo và kiểm thử các ứng dụng React Native. Sau cùng, nó cung cấp các thành phần UI và các dịch vụ thường chỉ có sẵn khi bạn cài đặt một thành phần React Native của bên thứ ba. Tất cả đều được cung cấp thông qua Expo SDK.
Những hạn chế của Expo
Trước khi đi sâu hơn, điều quan trọng là cần phải biết được một số hạn chế của Expo:
- Expo không hỗ trợ thực thi code trong nền. Điều này có nghĩa là bạn không thể, ví dụ, chạy code để lắng nghe những thay đổi vị trí khi ứng dụng bị đóng.
- Các ứng dụng Expo bị giới hạn trong các API gốc mà Expo SDK hỗ trợ. Điều này có nghĩa là nếu ứng dụng của bạn cần sử dụng một tính năng đặc trưng như giao tiếp với thiết bị ngoại vi thông qua Bluetooth, thì lựa chọn duy nhất để cài đặt chức năng đó là với React Native đơn thuần, hoặc bằng cách viết code bằng một thư viện có tên ExpoKit.
- Expo trói buộc bạn vào bộ công cụ của họ. Điều này có nghĩa là bạn không thể đơn giản là cài đặt và sử dụng hầu hết các công cụ tuyệt vời có sẵn để phát triển React Native chẳng hạn như công cụ dòng lệnh, scaffolders và các framework UI. Nhưng điều tốt là Expo SDK tương thích với các ứng dụng React Native thuần tuý, vì vậy bạn sẽ không gặp bất kỳ vấn đề nào khi bạn gỡ ứng dụng khỏi Expo.
- Mã nhị phân độc lập của các ứng dụng Expo chỉ có thể được built trực tuyến. Expo cung cấp một công cụ dòng lệnh có tên là Exp. Công cụ này cho phép các nhà phát triển bắt đầu quá trình built trên các máy chủ Expo. Khi đã hoàn tất, một URL sẽ được cung cấp để tải về tập tin .apk hoặc .ipa.
Ngay cả với những hạn chế này, điều quan trọng cần lưu ý là Expo là một framework đầy đủ chức năng với rất nhiều hỗ trợ cho các API thông dụng trên Android hoặc iOS. Điều này có nghĩa là nó đã bao quát cho bạn hầu hết các chức năng mà các ứng dụng thường cần. Vì vậy, thường không cần phải tìm bên ngoài Expo để cài đặt các tính năng gốc.
Tổng quan về ứng dụng
Ứng dụng mà chúng ta sắp tạo ra là một trò chơi trí nhớ. Bạn có thể đã từng chơi loại trò chơi này - người dùng phải tìm những cặp phù hợp bằng cách mở hai thẻ cùng một lúc. Màn hình mặc định trông như sau:
Và đây là minh hoạ một khi tất cả các cặp đã được mở ra:
Một khi họ đã giải quyết được trò chơi, người dùng có thể nhấn vào nút reset để đặt lại các mục về trạng thái ban đầu. Điều này cho phép họ bắt đầu lại trò chơi.
Cài đặt Expo
Không giống với React Native thuần tuý nơi bạn phải cài đặt và cấu hình Android Studio hoặc Xcode và các phụ thuộc khác, với Expo chỉ có một vài bước để làm theo để bắt đầu phát triển các ứng dụng:
- Tải về và cài đặt Node.js. Expo phụ thuộc vào nền tảng Node.js để cho các công cụ dòng lệnh và quản lý phụ thuộc của nó hoạt động.
- Cài đặt Expo Client trên thiết bị iOS hoặc Android của bạn. Cái này được dùng để xem trước ứng dụng trong khi bạn đang phát triển nó.
- Cài đặt công cụ dòng lệnh. Công cụ này cho phép bạn tạo một dự án Expo mới, bắt đầu một quá trình build và những thứ khác. Thực thi lệnh sau để cài đặt nó:
1
npm install exp --global
Tạo một ứng dụng Expo mới
Khi bạn đã cài đặt tất cả các phụ thuộc, thì giờ đây bạn có thể tạo một ứng dụng Expo mới:
Một khi đã tạo xong, nó sẽ tạo ra một thư mục mới gọi là MemoryGame. Chuyển vào bên trong thu mục đó và bắt đầu chạy máy chủ phát triển:
1
cd MemoryGame 2
exp start
Ngoài ra, bạn cũng có thể sử dụng Expo XDE. Công cụ này cho phép bạn tạo và chạy ứng dụng Expo thông qua một giao diện. Bạn có thể tải trình cài đặt từ repo GitHub của Expo. Hiện tại, nó chỉ hỗ trợ Windows và Mac. Vì vậy, nếu bạn đang chạy Ubuntu hoặc Linux, tốt hơn hết là bạn nên sử dụng dòng lệnh ngay lúc này.
Một khi máy chủ phát triển đang chạy, bạn sẽ có thể thấy một thứ gì đó như sau:
Đó là mã QR trỏ đến bản preview trực tiếp của dự án. Hãy mở ứng dụng Expo client trên điện thoại của bạn và quét mã bằng QR scanner. Lúc này, bạn sẽ có thể xem được màn hình mặc định. Mỗi khi bạn nhấn Control-S trên bất kỳ tập tin nào của dự án, bản xem trước sẽ tự động tải lại để phản ánh những thay đổi.
Bạn có thể tìm thấy mã nguồn đầy đủ của dự án trên repo GitHub. Hoặc nếu bạn muốn thử ứng dụng, bạn có thể xem bản demo. Chỉ cần chọn Mã QR và quét nó trên điện thoại của bạn bằng ứng dụng Expo client.
Viết Ứng dụng
Bây giờ chúng ta đã sẵn sàng để viết ứng dụng. Hãy bắt đầu với một số thành phần UI trước khi chúng ta quay trở lại và cài đặt thành phần chính.
Thành phần Header
Header được sử dụng để hiển thị tiêu đề của ứng dụng. Tạo một thư mục components. Bên trong nó, tạo một tập tin Header.js và thêm các code sau:
1
import React from 'react'; 2
import { StyleSheet, Text, View } from 'react-native'; npm install exp --global
0
npm install exp --global
1
npm install exp --global
2
npm install exp --global
3
npm install exp --global
4
npm install exp --global
5
npm install exp --global
6
npm install exp --global
7
npm install exp --global
8
npm install exp --global
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
cd MemoryGame 0
npm install exp --global
1
cd MemoryGame 2
cd MemoryGame 3
cd MemoryGame 4
npm install exp --global
1
cd MemoryGame 6
cd MemoryGame 7
cd MemoryGame 8
cd MemoryGame 9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
exp start
0
exp start
1
exp start
2
exp start
3
exp start
4
exp start
5
exp start
6
exp start
7
exp start
8
exp start
9
1
0
1
1
1
2
1
9
1
4
1
5
Đây chỉ là một thành phần React Native cơ bản, với một số style để phù hợp với giao diện người dùng của ứng dụng.
Hợp phần Score
Tiếp theo là thành phần để hiển thị số điểm [components/Score.js]:
1
import React from 'react'; 2
import { StyleSheet, Text, View } from 'react-native'; npm install exp --global
0
npm install exp --global
1
npm install exp --global
2
import React from 'react'; 3
npm install exp --global
4
npm install exp --global
5
npm install exp --global
6
npm install exp --global
7
npm install exp --global
8
npm install exp --global
9
1
0
2
1
1
2
2
3
1
4
1
5
1
6
1
7
1
8
1
9
cd MemoryGame 0
npm install exp --global
1
cd MemoryGame 2
cd MemoryGame 3
cd MemoryGame 4
npm install exp --global
1
cd MemoryGame 6
cd MemoryGame 7
cd MemoryGame 8
import { StyleSheet, Text, View } from 'react-native'; 9
2
0
2
1
2
2
npm install exp --global
03
2
4
npm install exp --global
05
2
6
exp start
3
2
8
npm install exp --global
09
exp start
0
npm install exp --global
11
exp start
2
npm install exp --global
13
exp start
4
1
9
exp start
6
1
5
Một lần nữa, chỉ là một thành phần hiển thị đơn giản với một cái text view và một số style cơ bản.
Thành phần Card
Thành phần card [components/Card.js] sẽ hiển thị các thẻ. Các thẻ này sử dụng các biểu tượng từ bộ biểu tượng vector của Expo. Đây là một trong những tính năng có sẵn khi bạn sử dụng Expo: nó bao gồm các biểu tượng từ các bộ biểu tượng như FontAwesome, Entypo và Ionicons.
Trong đoạn code ở dưới đây, bạn có thể thấy rằng chúng ta chỉ sử dụng FontAwesome. Nó có biểu tượng mà chúng ta muốn hiển thị trạng thái mặc định của thẻ: một dấu chấm hỏi. Như bạn sẽ thấy trong phần chính của ứng dụng, chúng ta cũng sẽ sử dụng các biểu tượng từ Entypo và Ionicons. Tham chiếu đến nguồn các biểu tượng này sẽ được chuyển tới thành phần này, do đó, không cần chỉ định chúng ở đây:
1
import React from 'react'; 2
npm install exp --global
21
npm install exp --global
0
npm install exp --global
23
Bên trong phương thức
import React from 'react'; 34, chúng ta chỉ sử dụng nguồn và biểu tượng được truyền dưới dạng props nếu thẻ được mở ra. Mặc định, nó sẽ chỉ hiển thị biểu tượng dấu chấm hỏi từ FontAwesome. Nhưng nếu thẻ mở ra, nó sẽ sử dụng nguồn biểu tượng, biểu tượng, và màu sắc đã được truyền dưới dạng props.
Mỗi thẻ có thể được chạm vào. Khi chạm, hàm
import React from 'react'; 35 sẽ được chạy, nó cũng được truyền thông qua props. Sau này bạn sẽ thấy những gì hàm thực hiện, nhưng bây giờ, chỉ cần biết rằng nó cập nhật trạng thái để hiện ra biểu tượng trên thẻ:
1
npm install exp --global
25
2
npm install exp --global
1
npm install exp --global
0
npm install exp --global
7
npm install exp --global
2
npm install exp --global
31
npm install exp --global
4
npm install exp --global
33
npm install exp --global
6
npm install exp --global
35
npm install exp --global
8
npm install exp --global
37
1
0
npm install exp --global
31
1
2
npm install exp --global
41
1
4
npm install exp --global
43
1
6
npm install exp --global
45
1
8
npm install exp --global
47
cd MemoryGame 0
npm install exp --global
49
cd MemoryGame 2
npm install exp --global
31
cd MemoryGame 4
npm install exp --global
9
cd MemoryGame 6
npm install exp --global
55
cd MemoryGame 8
npm install exp --global
57
2
0
npm install exp --global
59
2
2
npm install exp --global
61
2
4
npm install exp --global
63
2
6
npm install exp --global
65
2
8
npm install exp --global
67
exp start
0
npm install exp --global
69
exp start
2
1
5
exp start
4
1
7
exp start
6
1
9
exp start
8
npm install exp --global
77
Đừng quên thêm style:
1
cd MemoryGame 7
2
npm install exp --global
81
npm install exp --global
0
2
1
npm install exp --global
2
npm install exp --global
85
npm install exp --global
4
exp start
3
npm install exp --global
6
npm install exp --global
89
npm install exp --global
8
npm install exp --global
91
1
0
npm install exp --global
13
1
2
1
9
1
4
1
5
Hàm trợ giúp
Chúng ta cũng sẽ sử dụng một hàm trợ giúp gọi là
import React from 'react'; 36. Hàm này cho phép chúng ta sắp xếp mảng các thẻ theo thứ tự ngẫu nhiên để thứ tự của chúng sẽ khác nhau mỗi khi trò chơi được đặt lại:
1
npm install exp --global
99
2
1
01
npm install exp --global
0
1
03
npm install exp --global
2
1
05
npm install exp --global
4
1
07
npm install exp --global
6
1
09
npm install exp --global
8
1
11
1
0
1
13
1
2
1
9
1
4
1
17
1
6
npm install exp --global
77
Thành phần Chính
Thành phần chính [App.js] chứa logic của chính ứng dụng và kết nối tất cả mọi thứ lại với nhau. Bắt đầu bằng cách bao gồm các gói React và Expo mà chúng ta sẽ sử dụng. Lần này, chúng ta sẽ sử dụng tất cả các nguồn biểu tượng từ các biểu tượng vector của Expo:
1
import React from 'react'; 2
1
23
npm install exp --global
0
1
25
Tiếp theo, hãy bao gồm các thành phần và hàm trợ giúp mà chúng ta đã tạo ra trước đó:
1
1
27
2
1
29
npm install exp --global
0
1
31
npm install exp --global
2
npm install exp --global
1
npm install exp --global
4
1
35
Bên trong constructor, trước tiên chúng ta tạo ra mảng đại diện cho các thẻ đơn nhất.
import React from 'react'; 37 là nguồn biểu tượng,
import React from 'react'; 38 là tên của biểu tượng [bạn có thể tìm thấy tên trên GitHub nếu bạn muốn sử dụng các biểu tượng khác], và
import React from 'react'; 39, dĩ tự nhiên là màu sắc của biểu tượng:
1
1
37
2
npm install exp --global
1
npm install exp --global
0
1
41
npm install exp --global
2
1
43
npm install exp --global
4
1
45
npm install exp --global
6
1
47
npm install exp --global
8
1
49
1
0
npm install exp --global
31
1
2
1
53
1
4
1
55
1
6
1
57
1
8
1
59
cd MemoryGame 0
1
61
cd MemoryGame 2
1
63
cd MemoryGame 4
npm install exp --global
1
cd MemoryGame 6
1
67
cd MemoryGame 8
1
69
2
0
1
71
2
2
1
73
2
4
1
75
2
6
1
77
2
8
1
79
exp start
0
1
71
exp start
2
1
83
exp start
4
1
85
exp start
6
1
87
exp start
8
1
79
1
0
1
71
1
2
1
83
1
4
1
95
1
96
1
97
1
98
1
79
cd MemoryGame 00
1
71
cd MemoryGame 02
1
83
cd MemoryGame 04
cd MemoryGame 05
cd MemoryGame 06
cd MemoryGame 07
cd MemoryGame 08
1
79
cd MemoryGame 10
1
71
cd MemoryGame 12
1
83
cd MemoryGame 14
cd MemoryGame 15
cd MemoryGame 16
cd MemoryGame 17
cd MemoryGame 18
1
79
cd MemoryGame 20
1
71
cd MemoryGame 22
1
83
cd MemoryGame 24
cd MemoryGame 25
cd MemoryGame 26
cd MemoryGame 27
cd MemoryGame 28
1
79
cd MemoryGame 30
1
71
cd MemoryGame 32
1
83
cd MemoryGame 34
cd MemoryGame 35
cd MemoryGame 36
cd MemoryGame 37
cd MemoryGame 38
1
79
cd MemoryGame 40
1
71
cd MemoryGame 42
1
73
cd MemoryGame 44
cd MemoryGame 45
cd MemoryGame 46
cd MemoryGame 47
cd MemoryGame 48
1
79
cd MemoryGame 50
1
71
cd MemoryGame 52
1
73
cd MemoryGame 54
cd MemoryGame 55
cd MemoryGame 56
cd MemoryGame 57
cd MemoryGame 58
1
79
cd MemoryGame 60
1
71
cd MemoryGame 62
1
73
cd MemoryGame 64
cd MemoryGame 65
cd MemoryGame 66
cd MemoryGame 67
cd MemoryGame 68
1
79
cd MemoryGame 70
1
71
cd MemoryGame 72
cd MemoryGame 73
cd MemoryGame 74
cd MemoryGame 75
cd MemoryGame 76
cd MemoryGame 77
cd MemoryGame 78
1
79
cd MemoryGame 80
1
71
cd MemoryGame 82
cd MemoryGame 73
cd MemoryGame 84
cd MemoryGame 85
cd MemoryGame 86
cd MemoryGame 87
cd MemoryGame 88
cd MemoryGame 89
cd MemoryGame 90
cd MemoryGame 91
cd MemoryGame 92
npm install exp --global
1
cd MemoryGame 94
cd MemoryGame 95
cd MemoryGame 96
1
9
cd MemoryGame 98
npm install exp --global
1
2
00
npm install exp --global
77
Lưu ý rằng, thay vì trực tiếp chỉ định
import React from 'react'; 37 là
import React from 'react'; 41,
import React from 'react'; 42 hoặc
import React from 'react'; 43 cho mỗi đối tượng, chúng ta đang sử dụng các tên thuộc tính được sử dụng trong đối tượng
import React from 'react'; 44. Điều này là do chúng ta cần phải tạo một bản sao của mảng các thẻ để mỗi thẻ có một cặp. Tạo một bản sao bằng cách sử dụng các phương thức của mảng như
import React from 'react'; 45 sẽ tạo ra một bản sao của mảng, nhưng vấn đề là một khi các đối tượng riêng lẻ được sửa đổi trong bản sao hoặc bản gốc, thì cả hai mảng cũng được sửa đổi.
Điều này mang đến cho chúng ta giải pháp dưới đây là tạo ra một đối tượng hoàn toàn mới bằng cách chuyển đổi mảng
import React from 'react'; 46 thành một chuỗi và sau đó phân tích nó để chuyển đổi nó trở lại một mảng. Đây là lý do tại sao chúng ta đang sử dụng chuỗi vì các hàm không thể được chuyển đổi thành các chuỗi. Sau đó chúng ta kết hợp cả hai để thành mảng, trong đó có chứa tất cả các thẻ mà chúng ta cần:
1
2
03
2
npm install exp --global
1
npm install exp --global
0
2
07
Tiếp theo, lặp qua mảng đó và tạo ra một ID duy nhất cho mỗi cái, thiết lập nguồn biểu tượng, và sau đó thiết lập cho nó một trạng thái mặc định là closed - đóng:
1
2
09
2
2
11
npm install exp --global
0
2
13
npm install exp --global
2
2
15
npm install exp --global
4
2
17
npm install exp --global
6
2
19
npm install exp --global
8
1
5
Sắp xếp các thẻ một cách ngẫu nhiên và thiết lập trạng thái mặc định:
1
2
23
2
npm install exp --global
1
npm install exp --global
0
2
27
npm install exp --global
2
2
29
npm install exp --global
4
2
31
npm install exp --global
6
2
33
npm install exp --global
8
2
35
1
0
2
37
1
2
npm install exp --global
77
Phương thức
import React from 'react'; 34 kết xuất header, cards, score và nút để đặt lại trò chơi hiện tại. Nó sử dụng hàm
import React from 'react'; 48 để kết xuất các hàng thẻ riêng lẻ. Màn hình sẽ có sáu hàng chứa bốn thẻ:
1
2
41
2
2
43
npm install exp --global
0
2
45
npm install exp --global
2
2
47
npm install exp --global
4
2
49
npm install exp --global
6
2
51
npm install exp --global
8
2
53
1
0
2
55
1
2
1
5
1
4
2
59
1
6
2
61
1
8
2
63
cd MemoryGame 0
2
65
cd MemoryGame 2
2
67
cd MemoryGame 4
2
69
cd MemoryGame 6
2
71
cd MemoryGame 8
2
73
2
0
npm install exp --global
77
Dưới đây là code cho hàm
import React from 'react'; 48. Hàm này sử dụng hàm
import React from 'react'; 50, chịu trách nhiệm tạo ra một mảng của các mảng với bốn phần tử mỗi cái. Điều này cho phép chúng ta kết xuất mỗi hàng, và sau đó sử dụng một hàm khác để kết xuất cards cho mỗi lần lặp của hàm
import React from 'react'; 51:
1
2
77
2
2
79
npm install exp --global
0
2
81
npm install exp --global
2
2
83
npm install exp --global
4
npm install exp --global
9
npm install exp --global
6
2
87
npm install exp --global
8
2
89
1
0
1
5
1
2
1
7
1
4
2
95
1
6
2
79
1
8
npm install exp --global
77
Dưới đây là hàm
import React from 'react'; 50:
1
exp start
01
2
exp start
03
npm install exp --global
0
exp start
05
npm install exp --global
2
exp start
07
npm install exp --global
4
exp start
09
npm install exp --global
6
exp start
11
npm install exp --global
8
exp start
13
1
0
exp start
15
1
2
exp start
17
1
4
exp start
19
1
6
exp start
21
1
8
npm install exp --global
49
cd MemoryGame 0
2
95
cd MemoryGame 2
npm install exp --global
1
cd MemoryGame 4
exp start
29
cd MemoryGame 6
npm install exp --global
77
Tiếp theo là hàm
import React from 'react'; 53. Hàm này nhận mảng các đối tượng thẻ và kết xuất chúng thông qua thành phần
import React from 'react'; 54. Tất cả những gì chúng ta cần làm ở đây là truyền vào từng thuộc tính của mỗi đối tượng thẻ dưới dạng props. Hàm này sau đó được sử dụng để hiển thị chính xác biểu tượng, như bạn đã thấy trong code cho thành phần
import React from 'react'; 54. Hàm
import React from 'react'; 35 cũng được truyền qua như là một prop. ID của thẻ được truyền vào hàm đó do đó một thẻ đơn nhất có thể được xác định và cập nhật:
1
exp start
33
2
exp start
35
npm install exp --global
0
npm install exp --global
9
npm install exp --global
2
exp start
39
npm install exp --global
4
exp start
41
npm install exp --global
6
exp start
43
npm install exp --global
8
exp start
45
1
0
exp start
47
1
2
exp start
49
1
4
exp start
51
1
6
exp start
53
1
8
1
7
cd MemoryGame 0
2
95
cd MemoryGame 2
npm install exp --global
77
Bên trong hàm
import React from 'react'; 35, chúng ta có được các chi tiết của thẻ đã được chọn và xem nó có cần được xử lý thêm nữa không:
1
exp start
61
2
exp start
63
npm install exp --global
0
exp start
65
npm install exp --global
2
exp start
67
npm install exp --global
4
npm install exp --global
5
npm install exp --global
6
exp start
71
npm install exp --global
8
exp start
73
1
0
exp start
75
1
2
2
95
1
4
npm install exp --global
1
1
6
exp start
81
1
8
npm install exp --global
5
cd MemoryGame 0
exp start
85
cd MemoryGame 2
exp start
87
cd MemoryGame 4
npm install exp --global
1
cd MemoryGame 6
exp start
91
cd MemoryGame 8
npm install exp --global
1
2
0
1
9
2
2
npm install exp --global
1
2
4
npm install exp --global
77
Bây giờ hãy điền vào code để xử lý một thẻ đã được chọn.
Trước tiên, chúng ta mở thẻ và thêm nó vào mảng của các thẻ hiện đang được chọn:
1
1
01
2
npm install exp --global
31
npm install exp --global
0
1
05
npm install exp --global
2
1
07
npm install exp --global
4
1
09
npm install exp --global
6
1
11
npm install exp --global
8
npm install exp --global
1
1
0
1
15
Một khi đã có hai phần tử trong mảng của các thẻ hiện đang được chọn, chúng ta kiểm tra tên biểu tượng có giống nhau không. Nếu giống thì có nghĩa là người dùng đã chọn đúng cặp. Nếu không thì họ chọn sai. Trong trường hợp đó, chúng ta đóng thẻ đầu tiên đã được chọn và sau đó thêm một chút độ trễ trước khi đóng thẻ thứ hai. [Bằng cách này người dùng có thể nhìn thấy biểu tượng thẻ trước khi nó quay lại trạng thái đóng].
1
1
17
2
1
19
npm install exp --global
0
1
21
npm install exp --global
2
1
23
npm install exp --global
4
1
25
npm install exp --global
6
1
27
npm install exp --global
8
npm install exp --global
31
1
0
1
31
1
2
1
33
1
4
1
35
1
6
1
37
1
8
1
39
cd MemoryGame 0
1
41
cd MemoryGame 2
1
43
cd MemoryGame 4
1
9
cd MemoryGame 6
npm install exp --global
1
cd MemoryGame 8
1
49
2
0
cd MemoryGame 3
2
2
npm install exp --global
1
2
4
1
55
Điều cuối cùng chúng ta cần làm trong click event handler là cập nhật trạng thái để phản ánh những thay đổi trong giao diện người dùng:
1
1
57
2
1
59
npm install exp --global
0
1
61
npm install exp --global
2
1
63
npm install exp --global
4
1
5
Một hàm liên quan đó là reset event handler. Khi nhấn nút reset, chúng ta chỉ cần khôi phục lại trạng thái mặc định bằng cách đóng tất cả các thẻ và xáo trộn chúng.
1
1
67
2
1
69
npm install exp --global
0
1
71
npm install exp --global
2
1
73
npm install exp --global
4
1
75
npm install exp --global
6
2
95
npm install exp --global
8
npm install exp --global
1
1
0
1
81
1
2
npm install exp --global
5
1
4
1
85
1
6
1
87
1
8
1
89
cd MemoryGame 0
1
91
cd MemoryGame 2
1
93
cd MemoryGame 4
1
95
cd MemoryGame 6
2
95
cd MemoryGame 8
npm install exp --global
77
Cuối cùng, chúng ta sẽ thêm một vài style cơ bản để làm cho ứng dụng của chúng ta trông đẹp hơn.
1
cd MemoryGame 7
2
import React from 'react'; 03
npm install exp --global
0
2
1
npm install exp --global
2
2
5
npm install exp --global
4
import React from 'react'; 09
npm install exp --global
6
exp start
3
npm install exp --global
8
import React from 'react'; 13
1
0
2
1
1
2
import React from 'react'; 17
1
4
exp start
3
1
6
import React from 'react'; 21
1
8
import React from 'react'; 23
cd MemoryGame 0
import React from 'react'; 25
cd MemoryGame 2
import React from 'react'; 27
cd MemoryGame 4
import React from 'react'; 29
cd MemoryGame 6
1
9
cd MemoryGame 8
1
5
Chạy thử Ứng dụng
Vì máy chủ phát triển Expo của bạn đã chạy từ đầu đến giờ, nên mọi thay đổi sẽ được đẩy lên thiết bị di động của bạn bằng live reload. Hãy thử ứng dụng và đảm bảo rằng nó hoạt động như mong đợi.
Tóm tắt
Như vậy là chúng ta đã hoàn tất bài viết! Trong bài hướng dẫn này, bạn đã học được cách sử dụng Expo XDE để nhanh chóng tạo ra một ứng dụng React Native. Expo là một cách hay để bắt đầu phát triển ứng dụng React Native vì nó loại bỏ sự cần thiết phải cài đặt nhiều phần mềm thường là nguyên nhân gây ra sự nhàm chán, đặc biệt là đối với người mới bắt đầu. Nó còn cung cấp các công cụ giúp thật sự dễ dàng để xem trước các ứng dụng trong khi nó đang được phát triển. Hãy tìm hiểu các tài nguyên được đề cập trên trang web Expo nếu bạn muốn tìm hiểu thêm.