React Native Splash Screen là gì?

React Native Splash Screen là chế độ xem chứa Văn bản hoặc Hình ảnh hiển thị khi ứng dụng khởi động lần đầu. Nó được sử dụng khi ứng dụng di động yêu cầu thông tin cần thiết trước khi bắt đầu. Ứng dụng có thể tải thông tin từ một số API bên ngoài hoặc bộ nhớ cục bộ.

Nếu không có thông tin đó, ứng dụng có thể không hiển thị được giao diện người dùng. Ví dụ: ứng dụng yêu cầu kiểm tra xem người dùng có được ủy quyền hay không và quyết định màn hình nào sẽ hiển thị.

Splash Screen sẽ tự động ẩn sau vài giây (3-5) khỏi màn hình và hiển thị khi ứng dụng khởi động lần sau.

Ví dụ về React Native Splash Screen

1. Nhập các thành phần Nền tảng, Biểu định kiểu, Chế độ xem, Văn bản, Hình ảnh, TouchableOpacity và Cảnh báo trong dự án của bạn.
2. Tạo hàm tạo () trong dự án và tạo trạng thái kiểu Boolean có tên là isVisible và đặt giá trị mặc định của nó là true. Trạng thái này được sử dụng để hiển thị và ẩn màn hình Splash.
3. Tạo một hàm có tên là Hide_Splash_Screen() . Nó thay đổi giá trị trạng thái là sai.
4. Tạo phương thức componentDidMount() trong lớp của bạn. Nó là một phương thức sẵn có và được gọi khi ứng dụng được tải đầy đủ. Trong cùng một phương thức, chúng ta có thể sử dụng hàm JavaScript setTimeout() để thay đổi trạng thái sau một thời gian nhất định.

App.js

1. import React, { Component } from 'react';  
2.  import { Platform, StyleSheet, View, Text,  
3.  Image, TouchableOpacity, Alert } from 'react-native';  
4.  export default class Myapp extends Component<{}>  
5. {  
6.    constructor(){  
7.      super();  
8.      this.state={  
9.      isVisible : true,  
10.     }  
11.   }  
12.    Hide_Splash_Screen=()=>{  
13.     this.setState({   
14.       isVisible : false   
15.     });  
16.   }  
17.    
18.   componentDidMount(){  
19.     var that = this;  
20.     setTimeout(function(){  
21.       that.Hide_Splash_Screen();  
22.     }, 5000);  
23.    }  
24.    
25.     render()  
26.     {  
27.         let Splash_Screen = (  
28.              <View style={styles.SplashScreen_RootView}>  
29.                  <View style={styles.SplashScreen_ChildView}>  
30.                        <Image source={{uri:'https://static.javatpoint.com/tutorial/react-native/images/react-native-tutorial.png'}}  
31.                     style={{width:'100%', height: '100%', resizeMode: 'contain'}} />  
32.                 </View>  
33.              </View> )  
34.          return(  
35.              <View style = { styles.MainContainer }>  
36.                 <Text style={{textAlign: 'center'}}> Splash Screen Example</Text>  
37.                  {  
38.                   (this.state.isVisible === true) ? Splash_Screen : null  
39.                 }  
40.             </View>  
41.               );  
42.     }  
43. }  
44.  const styles = StyleSheet.create(  
45. {  
46.     MainContainer:  
47.     {  
48.         flex: 1,  
49.         justifyContent: 'center',  
50.         alignItems: 'center',  
51.         paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0  
52.     },  
53.    
54.     SplashScreen_RootView:  
55.     {  
56.         justifyContent: 'center',  
57.         flex:1,  
58.         margin: 10,  
59.         position: 'absolute',  
60.         width: '100%',  
61.         height: '100%',  
62.       },  
63.    
64.     SplashScreen_ChildView:  
65.     {  
66.         justifyContent: 'center',  
67.         alignItems: 'center',  
68.         backgroundColor: '#00BCD4',  
69.         flex:1,  
70.     },  
71. });