Hướng dẫn tạo App Icon, Splash Screen cho ứng dụng React Native.

Đối với app mobile thì app icon hay màn hình splash rất quan trọng, nó giúp cho ứng dụng của chúng ta nhìn chuyên nghiệp hơn, đẹp hơn và dễ tiếp cận với người dùng hơn. Trong khi đó, App icon và màn hình splash cũng là 1 dạng để marketing cho ứng dụng của bạn. Trong bài hôm nay mình sẽ hướng dẫn các bạn tạo App Icon và Splash Screen.

Cần chuẩn bị 2 hình ảnh đúng kích cỡ cho app icon và Splash screen đặt vào trong thư mục của project.

Icon App: icon.png square 512 x 512

Splash screen: splash.png quare 2048 x 2048

Bước 1: cài thư viện

// install tool
brew install imagemagick
npm install -g yo generator-rn-toolbox

Bước 2: Tạo ảnh Icon + Splash chuẩn định dạng

// generate splash screen images
yo rn-toolbox:assets --icon icon.png --splash splash.png --store

Bước 3: Cài thư viện để tạo màn hình splash: react-native-splash-screen

yarn add react-native-splash-screen

Bước 4: Link thư viện

react-native link react-native-splash-screen

Bước 5: Config

Đối với IOS:

Mở xcode, vào project => build settings => header search paths add

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

Cập nhật AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    return YES;
}

@end

Đối với android sửa ở file MainActivity.java

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

Tạo file launch_screen.xml vào thư mục android/app/src/main/res/layout như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

thêm màu vào file android/app/src/main/res/values/colors.xml như sau:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

Bạn cũng có thể chỉnh styles cho splash ở android/app/src/main/res/values/styles.xml và thêm style như sau

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        
        <item name="android:windowIsTranslucent">true</item> //styles
    </style>
</resources>

Bước 6: Ở màn hình index.js của react native gọi thư viện splash như sau:

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

Bạn cần ẩn màn splash đi sau khi ứng dụng đã được khởi tạo xong.

Chúc các bạn thành công!

Nguồn: Doc react-native-splash-screen

https://ntdung1128.wordpress.com/2018/10/18/huong-dan-tao-icon-app-splash-screen-cho-ung-dung-react-native/

Bài liên quan

Hướng dẫn tạo App Icon, Splash Screen cho ứng dụng React Native.

Đối với app mobile thì app icon hay màn hình splash rất quan trọng, nó giúp cho ứng dụng của chúng ta nhìn chuyên nghiệp hơn, đẹp hơn và dễ tiếp cận với người dùng hơn. Trong khi đó, App icon và màn hình splash cũng là 1 dạng để marketing cho ứng dụng của bạn. Trong bài hôm nay mình sẽ hướng dẫn các ...

Nguyễn Dũng viết 21:23 ngày 18/10/2018

Hướng dẫn export file release cho ứng dụng React Native.

Đối với lập trình ứng dụng, công đoạn sau khi xây dựng chương trình cũng rất quan trọng đó là đóng gói sản phẩm, đưa sản phẩm lên kho ứng dụng (CH play store đối với ứng dụng Android, App store đối với ứng dụng IOS). Hôm nay mình sẽ hướng dẫn các bạn export file release cho ứng dụng RN.

Nguyễn Dũng viết 15:53 ngày 12/10/2018

Tất tật tật các cách tối đa performace cho ứng dụng React

TỔNG QUAN Lúc còn mới tập tành code React file bundle của mình thường lên tới từ 1Mb đến 6Mb. Chạy lần đầu trên product chậm rì chậm rịt. Sau gần 1 năm dùng React thì bản thân cũng rút ra một số cách dùng để cải thiện performance. Bài viết này sẽ xoanh quanh vấn đề làm sao để ...

Hoàng Hải Đăng viết 12:36 ngày 08/10/2018

Hướng dẫn cài đặt push notification cho ứng dụng React Native (p2)

- Nối tiếp phần 1, ở phần 2 chúng ta cùng cài đặt cho ios

Nguyễn Dũng viết 23:23 ngày 05/10/2018

[C#] Hướng dẫn thêm nút button vào thanh taskbar ứng dụng khi Minimize

Hi! xin chào các bạn, bài viết hôm nay, mình sẽ tiếp tục hướng dẫn các bạn cách thêm button vào thanh Taskbar windows lập trình C# từ Windows 7 trở lên, các ứng dụng khi các bạn thu nhỏ, đều có hiển chế độ thumbnail. Trong bài viết này, mình sẽ hướng ...

Vũ Văn Thanh viết 11:42 ngày 02/10/2018

Nguyễn Dũng

4 chủ đề

9 bài viết

0