Với Expo, những nhà tăng trưởng hoàn toàn có thể tạo ra những ứng dụng React Native mà không gặp bất kể sự phiền phức nào giống như khi thiết lập và thông số kỹ thuật những ứng dụng phụ trợ như Android Studio, Xcode hoặc toàn bộ những công cụ khác thiết yếu để tăng trưởng 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 game show trí nhớ đơn thuần bằng Expo. Cùng với đó bạn sẽ được khám phá về những kỹ năng và 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ì?
Nội dung
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.
Bạn đang đọc: Phát triển React Native Đơn giản hơn với Expo
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ố ít 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 chú ý quan tâm là Expo là một framework vừa đủ tính năng với rất nhiều tương hỗ cho những 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 những công dụng mà những ứ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 để setup những tính năng gốc .
Tổng quan về ứng dụng
Ứng dụng mà tất cả chúng ta sắp tạo ra là một game show trí nhớ. Bạn hoàn toàn có thể đã từng chơi loại game show này – người dùng phải tìm những cặp tương thích 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ổng thể những 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 setup và thông số kỹ thuật Android Studio hoặc Xcode và những nhờ vào khác, với Expo chỉ có một vài bước để làm theo để mở màn tăng trưởng những ứ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ó:
Tạo một ứng dụng Expo mới
Khi bạn đã thiết lập toàn bộ những nhờ vào, thì giờ đây bạn hoàn toà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:
Ngoài ra, bạn cũng hoàn toàn có thể sử dụng Expo XDE. Công cụ này được cho phép bạn tạo và chạy ứng dụng Expo trải qua một giao diện. Bạn hoàn toàn có thể tải trình thiết lập từ repo GitHub của Expo. Hiện tại, nó chỉ tương hỗ 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 sever tăng trưởng đang chạy, bạn sẽ hoàn toàn 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ờ tất cả chúng ta đã sẵn sàng chuẩn bị để viết ứng dụng. Hãy khởi đầu với một số ít thành phần UI trước khi tất cả chúng ta quay trở lại và setup 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:
Đây chỉ là một thành phần React Native cơ bản, với một số ít style để tương thích 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):
Một lần nữa, chỉ là một thành phần hiển thị đơn thuần với một cái text view và 1 số ít 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 hoàn toàn có thể thấy rằng tất cả chúng ta chỉ sử dụng FontAwesome. Nó có hình tượng mà tất cả 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, tất cả chúng ta cũng sẽ sử dụng những hình tượng từ Entypo và Ionicons. Tham chiếu đến nguồn những hình 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 :
Bên trong phương thức render(), 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 clickCard() 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ẻ:
Đừng quên thêm style :
Hàm trợ giúp
Chúng ta cũng sẽ sử dụng một hàm trợ giúp gọi là shuffle(). 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:
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:
Tiếp theo, hãy gồm có những thành phần và hàm trợ giúp mà tất cả chúng ta đã tạo ra trước đó :
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. src là nguồn biểu tượng, name 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à color, dĩ tự nhiên là màu sắc của biểu tượng:
Lưu ý rằng, thay vì trực tiếp chỉ định src là FontAwesome, Entypo hoặc Ionicons 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 sources. Đ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ư slice() 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 cards 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:
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 hình tượng, và sau đó thiết lập cho nó một trạng thái mặc định là closed – đóng :
Sắp xếp những thẻ một cách ngẫu nhiên và thiết lập trạng thái mặc định :
Phương thức render() 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 renderRows() để 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ẻ:
Dưới đây là code cho hàm renderRows(). Hàm này sử dụng hàm getRowContents(), 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 map():
Dưới đây là hàm getRowContents():
Tiếp theo là hàm renderCards(). 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 Card. 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 Card. Hàm clickCard() 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:
Bên trong hàm clickCard(), 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:
Bây giờ hãy điền vào code để giải quyết và xử lý một thẻ đã được chọn .
Trước tiên, tất cả chúng ta mở thẻ và thêm nó vào mảng của những thẻ hiện đang được chọn :
Một khi đã có hai thành phần trong mảng của những thẻ hiện đang được chọn, tất cả chúng ta kiểm tra tên hình 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 đó, tất cả chúng ta đóng thẻ tiên phong đã được chọn và sau đó thêm một chút ít độ trễ trước khi đóng thẻ thứ hai. ( Bằng cách này người dùng hoàn toàn có thể nhìn thấy hình tượng thẻ trước khi nó quay lại trạng thái đóng ) .
Điều sau cuối tất cả chúng ta cần làm trong click sự kiện handler là update trạng thái để phản ánh những đổi khác trong giao diện người dùng :
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.
Cuối cùng, tất cả chúng ta sẽ thêm một vài style cơ bản để làm cho ứng dụng của tất cả chúng ta trông đẹp hơn .
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à tất cả 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 gọn tạo ra một ứng dụng React Native. Expo là một cách hay để khởi đầu tăng trưởng ứng dụng React Native vì nó vô hiệu sự thiết yếu phải thiết lập nhiều ứng dụng thường là nguyên do gây ra sự nhàm chán, đặc biệt quan trọng là so với người mới mở màn. Nó còn phân phối những công cụ giúp thật sự thuận tiện để xem trước những ứng dụng trong khi nó đang được tăng trưởng. Hãy khám phá những tài nguyên được đề cập trên website Expo nếu bạn muốn tìm hiểu và khám phá thêm .
Và hãy khám phá thêm 1 số ít bài viết khác của chúng tôi về Phát triển ứng dụng React Native !
Source: https://vietartproductions.com
Category: Blog
