8,538 lượt đọc

Cách thêm biểu tượng và màn hình giật gân trong React Native (Không có thư viện)

từ tác giả Lucas Leonardo7m2023/03/15

dài quá đọc không nổi

Hướng dẫn này được tạo với ứng dụng được xây dựng bằng ứng dụng tạo-phản ứng. Để làm việc với môi trường của Apple, chúng tôi cần có macOS. Đối với điều này, chúng tôi sẽ cần các biểu tượng ở các kích cỡ khác nhau cũng như phiên bản tròn của các biểu tượng (không có nền). Ngoài ra, xin lưu ý rằng nếu bạn không có các kích thước này, chúng tôi có hướng dẫn từng bước về cách định cấu hình kích thước này.

featured image - Cách thêm biểu tượng và màn hình giật gân trong React Native (Không có thư viện)

Hôm nay, tôi phải đối mặt với thử thách sau trong kỳ thực tập của mình: sửa đổi/triển khai màn hình giật gân và biểu tượng cho dự án mà tôi đang thực hiện.

Tuy nhiên, tôi thích làm điều đó một cách tự nhiên để không bị phụ thuộc vào các thư viện của bên thứ ba. Tôi dành một chút thời gian để thực hiện (nghiên cứu) đột biến về cách thức hoạt động của nó, nơi tôi sẽ phải thực hiện các thay đổi và những gì nó sẽ áp dụng. Sau khi làm tăng đột biến, tôi hiểu rằng mình sẽ phải làm riêng cho iOS và Android.

Hãy nói về iOS trước!

Lưu ý: Hướng dẫn này được tạo với ứng dụng được xây dựng bằng ứng dụng tạo-phản ứng.

iOS

Đầu tiên, chúng ta cần nhớ rằng để làm việc với môi trường của Apple, chúng ta cần có macOS. Bây giờ dự án đã được tạo, hãy chuyển đến thư mục 'ios' và mở nó trong Xcode .

Sau đó, chúng tôi chuyển đến thư mục có tên dự án của chúng tôi, theo ví dụ hư cấu bên dưới:
Bây giờ, chúng tôi sẽ chuyển đến tệp 'Hình ảnh', nơi chúng tôi sẽ có các tùy chọn kích thước. Chỉ cần kéo các hình ảnh tương ứng cho từng chiều và cả một hình ảnh để làm biểu tượng ứng dụng sử dụng trong màn hình giật gân (nếu bạn không biết cách định dạng hình ảnh của mình cho đúng tiêu chuẩn, ở cuối bài viết, chúng tôi sẽ có một hướng dẫn ngắn gọn về cách thực hiện).
Tại thời điểm này, chúng tôi đã hoàn tất việc định cấu hình các biểu tượng và bây giờ chúng tôi chuyển sang màn hình giật gân. Đối với bước này, tôi sẽ sử dụng một nền đồng nhất và một hình ảnh ở giữa làm ví dụ, nhưng bạn có thể chỉnh sửa nó theo thiết kế của bạn đã tạo (hoặc như bạn tưởng tượng lol).

Đầu tiên, chúng tôi sẽ mở tệp 'LaunchScreen' trong Xcode. Trong tệp này, chúng ta sẽ điều hướng theo thứ tự sau: 'View Controller Scene' → 'View Controller' → 'View' .

Trong trường này, chúng tôi có khu vực an toàn, không gì khác hơn là không gian hữu ích trên màn hình.

Theo mặc định, nó đã đi kèm với tên bạn đã đặt cho ứng dụng khi bạn tạo ứng dụng và phần cuối trang 'Được cung cấp bởi React Native'. Trong trường hợp này, chúng tôi sẽ xóa chân trang và tên ứng dụng. Sau đó, chúng ta sẽ nhấp vào dấu '+' ở góc trên bên phải và chuyển đến tùy chọn 'Chế độ xem hình ảnh' và kéo nó vào ứng dụng, căn chỉnh ở giữa và điều chỉnh độ phản hồi.
Bây giờ chúng tôi đã điều chỉnh mọi thứ, chỉ cần đóng Xcode và xây dựng ứng dụng của bạn. Ứng dụng của bạn sẽ được định cấu hình tất cả

(Lưu ý: nếu bạn đã chạy nó trên điện thoại hoặc trình giả lập trước đó, hãy nhớ xóa ứng dụng để các thay đổi biểu tượng được áp dụng)!

Android

Bây giờ hãy chuyển sang cấu hình Android. Đối với điều này, chúng tôi sẽ cần các biểu tượng ở nhiều kích cỡ khác nhau cũng như phiên bản tròn của các biểu tượng (không có nền). Ngoài ra, xin lưu ý rằng nếu bạn không có các kích thước này, chúng tôi có hướng dẫn từng bước ở cuối bài đăng về cách định cấu hình kích thước này. Một chút khác biệt so với những gì chúng tôi đã làm trên iOS, tôi đã chọn không sử dụng Android Studio ở đây và thay vào đó sửa đổi mã trực tiếp vì tôi không thấy trình đơn định dạng của nó thú vị lắm!
Với những hình ảnh đã được lưu trên thiết bị của bạn, chúng tôi sẽ mở thư mục ứng dụng trong trình quản lý tệp → android → ứng dụng → src → main → res. Bên trong thư mục "res", chúng ta có thư mục "drawable" và các thư mục "mipmap-suffix" khác.

Thư mục "drawable" là nơi chúng tôi sẽ định cấu hình phần giật gân của mình và có biểu tượng chính, trong khi thư mục "mipmap" chịu trách nhiệm về các kích thước biểu tượng khác nhau và biểu tượng tròn. Điều đầu tiên chúng tôi sẽ làm là thay thế các tệp biểu tượng bằng tệp của chúng tôi. Tôi khuyên bạn nên sử dụng cùng tên với tên đã có để bạn chưa phải sửa đổi mã gốc, như được hiển thị bên dưới:

Bây giờ chúng tôi đã thực hiện các thay đổi trong toàn bộ ứng dụng của mình, chúng tôi sẽ chuyển sang phần gốc! Bên trong thư mục drawable, chúng ta có tệp "rn_edit_text_material.xml" và chúng ta sẽ thực hiện một số cấu hình trong đó.

Để giúp bạn viết ít dài dòng hơn, tôi sẽ để lại các cấu hình mà tôi đã sử dụng để bạn chỉ cần sao chép và dán vào mã của mình cùng với phần giải thích về từng thay đổi: Chúng tôi đã thêm thẻ <layer-list> để điều hướng các lược đồ dự án , và bên trong nó, chúng tôi đã chuyển những gì chúng tôi muốn sử dụng.

Trong trường hợp này, tôi đã sử dụng thẻ <item android: drawable="@color/primary" /> để đặt màu nền (chúng ta sẽ định cấu hình ở bước tiếp theo) và thẻ cuối cùng với item android: prefix để đặt kích thước, hình ảnh sẽ sử dụng và vị trí của hình ảnh đó trên màn hình thiết bị.

 <?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I). The item below with state_pressed="false" and state_focused="false" causes a NullPointerException. NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/> For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR. --> <item android:drawable="@color/primary" /> <item android:width="100dp" android:height="100dp" android:drawable="@drawable/icon" android:gravity="center" /> </layer-list>

Bây giờ chúng tôi sẽ định cấu hình màu nền của chúng tôi, vì điều đó chúng tôi sẽ điều hướng đến thư mục "res" và tạo một tệp có tên "colors.xml" bên trong thư mục "values". Chúng tôi sẽ thêm mã bên dưới, chứa thẻ <resources> với thẻ màu nền của chúng tôi, đã có cùng tên mà chúng tôi đã đặt ở bước trước.
```
 <?xml version="1.0" encoding="utf-8" ?> <resources> <color name="primary">#f2f2f2</color> </resources>
```

"styles.xml" là một tệp trong thư mục "values", nơi chúng tôi sẽ chỉnh sửa dòng sau làm mặc định khi tạo ứng dụng:
```
 <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
```
đến mã này:
```
 <item name="android:windowBackground"> @drawable/rn_edit_text_material </item> <item name="android:statusBarColor"> @color/primary </item>
```
Trong đoạn mã được đề cập ở trên, chúng tôi đặt nền thuộc về cửa sổ nào ở trên cùng và ở dưới cùng, chúng tôi đặt màu (đã xác định trước đó). Bạn đã làm rất tốt! Ứng dụng Android của bạn phải được thiết lập hoàn toàn với các biểu tượng và màn hình giật gân mới. Đừng quên kiểm tra kỹ lưỡng trước khi xuất bản lên cửa hàng ứng dụng. Chúc may mắn với ứng dụng của bạn!

Tạo các biểu tượng ở kích thước mong muốn.

Để tạo các biểu tượng của chúng tôi với kích thước chính xác, chúng tôi sẽ sử dụng 2 công cụ, công cụ đầu tiên được gọi là #Figma ( https://www.figma.com/ ) và trang thứ hai là trang web có tên #ApeTools ( https://apetools.webprofusion.com/#/tools/imagegorilla ). Trong ApeTools, chúng tôi tải lên hình ảnh của mình và định dạng hình ảnh đó ở kích thước tiêu chuẩn của iOS hoặc Android. Trong Figma, chúng tôi sẽ tải lên các hình ảnh Android của mình và thêm borderRadius cho chúng để làm cho chúng được làm tròn.

ApeCông cụ:
Để sử dụng nó, chúng ta sẽ nhấp vào tùy chọn "chọn tệp", chọn Logo rồi chọn cơ sở Android và iOS, sau đó chỉ cần nhấp vào Kapow! và trang web sẽ tự động hiển thị các biểu tượng của chúng tôi.
hình:
Lưu ý: Bước này chỉ dành cho việc định cấu hình biểu tượng Android.

Chúng ta sẽ mở trang web hoặc ứng dụng #Figma, tải lên những hình ảnh mà chúng ta muốn làm tròn và trong menu bên phải, trong tùy chọn đường cong, chúng ta sẽ đặt '100' để có được một hình tròn hoàn hảo (trong ví dụ bên dưới tôi đã làm nó chỉ với một hình ảnh để minh họa, nhưng nó nên được thực hiện trong tất cả các hình ảnh của "@mipmap" và tôi cũng đã sử dụng một borderRadius lớn hơn vì hình ảnh mẫu của tôi quá lớn).