Splash screen React Native đơn giản dễ làm

0
336

Có những trường hợp ứng dụng của bạn cần phải khỏi tạo những thông tin cần thiết trước khi bắt đầu. Ví dụ: ứng dụng cần phải tải trước dữ liệu từ server hoặc từ database để hiển thị lên giao diện…

Không có những thông tin đó, có thể ứng dụng sẽ không thể hiện thị đúng được. Chắc bạn có sử dụng ứng dụng facebook chứ? Fanpage Manager của Facebook nữa… Những ứng dụng này đều có splash screen.

Trước đây, mình đã có một bài viết hướng dẫn các bạn tạo splash screen trong Android native, tức là sử dụng Android SDK. Nếu dự án của bạn sử dụng React native thì sao?

Đừng lo! React native cũng hỗ trợ để tạo splash screen rất tuyệt vời. Bài viết này, mình sẽ hướng dẫn các bạn tạo splash screen react native ios cực đơn giản nhé!

Tùy thuộc vào loại ứng dụng mà có 2 cách hiển thị splash screen:

  • Hiển thị splash screen ngay khi khởi động ứng dụng
  • Hiển thị splash screen khi bạn vào màn hình guide cho ứng dụng, sử dụng react navigation.

Mình sẽ hướng dẫn các bạn cả hai cách tạo splash screen trên.

Trước khi bạn bắt đầu bài viết hướng dẫn này, bạn nên đọc lại về thiết lập môi trường để lập trình react native được nhé:

Splash screen React Native

#Splash screen React Native cơ bản

Để minh họa cho cách tiếp cận này, mình sẽ tạo một ứng dụng react native từ đầu:

→ react-native init SplashScreenExample
→ cd SplashScreenExample
→ react-native run-ios

Sau khi chạy thử ứng dụng, bạn sẽ thấy giao diện ứng dụng “Hello world” quen thuộc.

Ứng dụng hello world bằng react native

Đầu tiên, chúng ta sẽ định nghĩa một flag để đánh dấu là dữ liệu vẫn đang được tải ( cái này mình giả sử cho use case mà ứng dụng của bạn cần ở thực tế: ví dụ như tải dữ liệu từ server trước khi vào ứng dụng).

Bạn tạo một hàm constructor cho App component và thiết lập giá trị khởi tạo cho flag.

constructor(props) {
  super(props);

  this.state = { isLoading: true }
}

Nhìn vào đoạn code trên, mình để flag: isLoading là true – để giả lập là mình đang cần tải dữ liệu. khi nào hoàn thành thì sẽ đổi thành false.

Bây giờ, khi dữ liệu vẫn đang tải, chúng ta sẽ hiển thị màn hình splash thay vì vào màn hình chính của ứng dụng.

render() {
  if (this.state.isLoading) {
    return <SplashScreen />;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome to React Native!
      </Text>
      <Text style={styles.instructions}>
        Reload the App to see a splash screen
      </Text>
    </View>
  );
}

Còn đây là code tạo màn hình splash:

class SplashScreen extends React.Component {
  render() {
    const viewStyles = [
      styles.container,
      { backgroundColor: 'orange' }
    ];
    const textStyles = {
      color: 'white',
      fontSize: 40,
      fontWeight: 'bold'
    };

    return (
      <View style={viewStyles}>
        <Text style={textStyles}>
          Splash Screen
        </Text>
      </View>
    );
  }
}

Ở đoạn code trên, mình tạo màn hình splash có một hình nền và một chữ ở giữa màn hình.

demo splash screen react native

Khi bạn chạy ứng dụn, bạn sẽ thấy màn hình splash hiển thị mãi mãi mà không có chuyển đến màn hình nào khác cả. Đơn giản vì lúc này mình chưa có chuyển giá trị cho flag: isLoading thành false.

Để cho đoạn code trên thêm sinh động, mình sẽ giả lập cho ứng dụng làm một việc gì đó tốn thời gian. Mình sẽ thêm một đoạn code delay 2 giây vào App component là xong.

performTimeConsumingTask = async() => {
  return new Promise((resolve) =>
    setTimeout(
      () => { resolve('result') },
      2000
    )
  );
}

Mình định nghĩa một callback componentDidMount trong App component. Mục đích là sau 2 giây ở trên, sẽ tự động chuyển flag: isLoading = false.

async componentDidMount() {
  // Preload data from an external API
  // Preload data using AsyncStorage
  const data = await this.performTimeConsumingTask();

  if (data !== null) {
    this.setState({ isLoading: false });
  }
}

Giờ thì bạn chạy lại ứng dụng xem thành quả nhé

splash screen ứng dụng reacti native

#Splash screen với app sử dụng React Navigation

Như mình đã đề cập ở trên, một số ứng dụng có thể có navigator component từ React navigation như một entry point. Mà navigator không có callback componentDidMount, nên chúng ta không có cách nào để thay đổi điều kiện hiển thị splash screen.

Do đó, chúng ta phải tìm cách tiếp cận khác.

Để minh họa cho bài viết, các bạn download source code mình tạo sẵn để bắt đầu:

Ứng dụng có 2 navigator: AppNavigator và HomeNavigator.  HomeNavigator được lồng bên trong AppNavigator và AppNavigator là một entry point của ứng dụng.

Dành cho bạn nào chưa biết React Navigator: React Navigation là gì và cách sử dụng

Điều hướng app sử dụng React Navigation

Đây là đoạn code thực hiện:

const HomeNavigator = createSwitchNavigator({
  Welcome: WelcomeScreen,
  Practice: PracticeScreen,
  Results: ResultsScreen
});

const AppNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeNavigator
    },
    HighScores: {
      screen: HighScoresScreen
    },
    Settings: {
      screen: SettingsScreen
    }
  }
);
export default createAppContainer(AppNavigator);

Để hiển thị splash screen, bạn cần phải inject trước AppNavigator. Bạn có thể tham khảo hình vẽ minh họa bên dưới:

Ví dụ React navigator

Và đây là cách mình inject vào AppNavigator:

const InitialNavigator = createSwitchNavigator({
  Splash: SplashScreen,
  App: AppNavigator
});

export default createAppContainer(InitialNavigator);

Tương tự với cách làm ở trên, chúng ta cũng sẽ phải tạo một file riêng cho giao diện màn hình splash.

Các bạn tạo file src/screens/SplashScreen.js với nội dung như sau:

import React from 'react';
import { View, Text } from 'react-native';

class SplashScreen extends React.Component {
  performTimeConsumingTask = async() => {
    return new Promise((resolve) =>
      setTimeout(
        () => { resolve('result') },
        2000
      )
    )
  }

  async componentDidMount() {
    // Preload data from an external API
    // Preload data using AsyncStorage
    const data = await this.performTimeConsumingTask();

    if (data !== null) {
      this.props.navigation.navigate('App');
    }
  }

  render() {
    return (
      <View style={styles.viewStyles}>
        <Text style={styles.textStyles}>
          Blitz Reading
        </Text>
      </View>
    );
  }
}

const styles = {
  viewStyles: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'orange'
  },
  textStyles: {
    color: 'white',
    fontSize: 40,
    fontWeight: 'bold'
  }
}

export default SplashScreen;

Mình thiết kế màn hình splash giống như với cách làm ở trên thôi. Điểm khác biệt duy nhất là SplashScreen component sẽ tự biết khi nào bị remove.

Trong callback componentDidMount, khi dữ liệu được tải xong, Splash compoent sẽ được điều hướng tới một App route. Ứng dụng vẫn hoạt động như cũ, chỉ có điều dữ liệu cần thiết đã được tải về xong và sẵn sàng sử dụng.

splash screen trong react native

#Tạm kết

Như vậy là mình đã hướng dẫn các bạn thêm một splash screen react native, và tùy thuộc ứng dụng mà bạn chọn cách thực hiện tương ứng.

Chúc bạn tìm được niềm vui với React native nhé.

Ngoài ra, các bạn có thể tham khảo thêm các bài viết khác về react native của mình tại đây nhé:

Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Thông báo