Quá trình tạo ứng dụng yêu cầu chúng ta phải cân nhắc nhiều nhiệm vụ khác nhau. Chúng ta cần tạo ra một codebase và thêm các hình ảnh để ứng dụng có giao diện đặc trưng. Như đã nói, quá trình xây dựng ứng dụng cần các tệp tin hình ảnh png được lưu trữ trong thư mục gốc của ứng dụng, chúng ta không thể bỏ qua nội dung của icon ứng dụng và màn hình splash.

Với các dịch vụ phát triển ứng dụng React Native, chúng ta có thể áp dụng một kỹ thuật đơn giản để thêm hai tài nguyên này vào ứng dụng. Hãy cùng tìm hiểu cách thực hiện.

Trước khi đi vào phần chính của bài viết, hãy cùng thảo luận một số lý thuyết liên quan đến chủ đề này.

Màn hình splash là gì?
Màn hình splash là màn hình mở đầu của ứng dụng. Nó hiển thị trong một khoảng thời gian ngắn trước khi người dùng truy cập vào nội dung chính của ứng dụng. Màn hình splash hoàn toàn khác với biểu tượng ứng dụng. Khi tạo màn hình splash, chúng ta cần nhớ rằng nó sẽ hiển thị trên toàn bộ màn hình của ứng dụng.

Biểu tượng ứng dụng là gì?
Chúng ta có thể đã thấy một logo mỗi khi muốn mở một ứng dụng nào đó. Logo này chính là biểu tượng ứng dụng mà chúng ta sẽ tạo trong bài viết này. Với biểu tượng này, chúng ta có thể nhận diện ứng dụng mà mình muốn sử dụng.

Các điều kiện tiên quyết
Có hai điều kiện tiên quyết cần được xem xét. Điều đầu tiên là thiết lập môi trường React Native. Điều thứ hai là quy trình tạo một ứng dụng cơ bản bằng React Native. Chúng ta không thể tiến xa hơn với dự án hiện tại nếu chưa đáp ứng các điều kiện này.

Để sử dụng framework React Native trong quá trình phát triển ứng dụng, chúng ta cần một số phần mềm như Node.js, Android Studio, VS Code Editor, và các phần mềm khác. Nếu có bất kỳ nghi ngờ nào liên quan đến quá trình thiết lập, hãy tham khảo bài viết này.

Đối với bất kỳ thắc mắc nào về quy trình xây dựng ứng dụng, chúng ta có thể ghé thăm blog hướng dẫn để có cái nhìn toàn diện. Từ blog này, chúng ta cũng sẽ học cách điều hướng qua trình chỉnh sửa mã VS Code và thêm các thành phần vào codebase của mình.

Plugin React Native bên thứ ba: react-native-splash-screen
Ở đây, chúng ta sẽ xem xét các bước cài đặt plugin bên thứ ba cần thiết.

Bằng cách import splashScreen từ thư viện này, chúng ta có thể ẩn màn hình chào mừng sau một khoảng thời gian nhất định.

Bây giờ, để có được gói này, chúng ta cần chạy một lệnh trên Command Prompt. Lưu ý, chúng ta cần mở Command Prompt từ thư mục của ứng dụng. Lệnh này như sau:

npm i react-native-splash-screen –save

Các tiêu chí bổ sung cần đáp ứng
Trong phần này, chúng ta sẽ tìm hiểu một số bước bổ sung cần thực hiện trước khi tạo codebase. Đây là phần cụ thể cho việc cài đặt plugin.

Lưu ý rằng, có hai cách để cài đặt plugin này. Chúng ta có thể chọn cài đặt tự động hoặc cài đặt thủ công. Chúng ta nên chọn cài đặt thủ công.

Để thực hiện điều này, làm theo các bước như sau. Trước tiên, mở trình chỉnh sửa mã từ ứng dụng của chúng ta.

Mở android và sau đó gradle. Tại đây, chúng ta cần thêm dòng sau:

include ‘:react-native-splash-screen’
project(‘:react-native-splash-screen’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-splash-screen/android’)

Bây giờ, mở android, sau đó app, và sau đó gradle. Tại đây, chúng ta sẽ tìm thấy một phần về dependencies. Trong phần này, thêm:

implementation project(‘:react-native-splash-screen’)

Mở android, sau đó app, sau đó src, sau đó main, sau đó java\com\awesomeproject, và sau đó file java để thêm:

import org.devio.rn.splashscreen.SplashScreenReactPackage;

Mở android, sau đó app, sau đó src, sau đó main, sau đó java\com\awesomeproject, và cuối cùng là file MainActivity.java để thêm:

import android.os.Bundle; // đây
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // đây
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);  // đây
super.onCreate(savedInstanceState);
}

Tham khảo hình 1 để có cái nhìn về cách các lệnh được thêm vào thư mục gốc của ứng dụng.

Tạo thư mục layout
Bây giờ, tạo một thư mục layout dưới ./main./res. Cũng tạo một file tên là launchscreen.xml trong thư mục layout. Có thể bỏ qua bước này nếu chúng ta đã có hai thư mục này trong thư mục gốc của dự án.

Mở android, sau đó app, sau đó src, sau đó main, sau đó res, sau đó layout, và cuối cùng là xml từ trình chỉnh sửa mã VS Code. Thêm:

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<ImageView android:layout_width=”match_parent” android:layout_height=”match_parent” android:src=”@drawable/launch_screen” android:scaleType=”centerCrop” />
</RelativeLayout>

Thêm màn hình splash và icon ứng dụng
Chúng ta cần tải một hình ảnh định dạng png. Dù hình ảnh cho icon ứng dụng sẽ có kích thước cụ thể, hình ảnh cho màn hình splash sẽ không yêu cầu kích thước cụ thể. Sau khi có được hình ảnh, tạo một thư mục drawable trong thư mục res của ứng dụng. Dán hình ảnh vào thư mục drawable và đặt tên là launch_screen. Sau đó, chúng ta cần lưu toàn bộ quá trình này.

Bây giờ, chúng ta sẽ tiến hành các bước thêm icon hình ảnh vào ứng dụng.

Ở đây, cần cân nhắc kích thước của hình ảnh. Chọn một hình ảnh từ trình duyệt web. Tải hình ảnh này với năm kích thước khác nhau và lưu trữ chúng trong năm file khác nhau. Khi mở thư mục res, chúng ta sẽ thấy năm file riêng biệt với tên là mipmap-hdpi, mipmap-mdpi, mipmap-xxxhdpi, mipmap-xxhdpi, và mipmap-xhdpi. Đã có một số hình ảnh mặc định trong năm thư mục này. Tất cả những gì chúng ta cần làm là thay thế các hình ảnh này bằng hình ảnh đã tải về.

Hãy cùng xác định kích thước của các hình ảnh. Với mipmap-hdpi, kích thước là 7272, với mipmap-xxxhdpi, kích thước là 192192, với mipmap-xxhdpi, kích thước là 144144, với mipmap-xhdpi, kích thước là 9696 và cuối cùng, với mipmap-mdpi, kích thước là 48*48.

Vậy là chúng ta đã tùy chỉnh thành công icon hình ảnh và màn hình splash. Bây giờ, chúng ta cần cấu trúc thư mục app.js.

Cấu trúc thư mục App.js
Phần này sẽ là một đoạn mã nhỏ. Chúng ta chỉ cần import các components và wrap SplashScreen với useEffect.

Hãy cùng xem cách thực hiện.

import { StyleSheet, Text, View } from ‘react-native’
import SplashScreen from ‘react-native-splash-screen’;
import React,{useEffect} from ‘react’

Ngoài các components cốt lõi, chúng ta cần import component quan trọng SplashScreen từ thư viện bên thứ ba RN: react-native-splash-screen.

Bây giờ, chúng ta sẽ gọi SplashScreen để ẩn màn hình chào mừng. Xem cú pháp sau:

useEffect(()=>{
SplashScreen.hide();
},2000)

Theo cú pháp này, màn hình chào mừng sẽ hiển thị trong 2 giây.

const App = () => {
return (
<View>
<Text>App</Text>
</View>
)
}

Đây là codebase chung mà chúng ta sẽ thấy trong mọi thư mục App.js. Mục đích của cú pháp này là để hiển thị dòng chữ “App”.

Khi đã cấu trúc xong thư mục app.js, chúng ta sẽ tiến hành chạy ứng dụng trên trình giả lập.

Chạy ứng dụng trên trình giả lập
Mở terminal từ ứng dụng. Chạy npm install và sau đó npx react-native run-android. Quá trình bundle của ứng dụng có thể mất chút thời gian. Ngay khi quá trình bundle hoàn thành,

màn hình như trong hình 2 sẽ xuất hiện trên trình giả lập. Cũng tham khảo hình 3 cho icon ứng dụng.