Hướng dẫn build react-native với repo
|
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. Show 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:
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 ExpoTrướ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:
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 ExpoKhô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:
1 npm install exp --global Tạo một ứng dụng Expo mớiKhi 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ụngBâ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 HeaderHeader đượ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 ScoreTiế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 CardThà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úpChú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ínhThà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ụngVì 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ắtNhư 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. |
