React Native - แถบสถานะ

ในบทนี้เราจะแสดงวิธีการควบคุมลักษณะแถบสถานะใน React Native

แถบสถานะใช้งานง่ายและสิ่งที่คุณต้องทำคือตั้งค่าคุณสมบัติเพื่อเปลี่ยนแปลง

hiddenคุณสมบัติสามารถใช้เพื่อซ่อนแถบสถานะ ในตัวอย่างของเราตั้งค่าเป็นfalse. นี่คือค่าเริ่มต้น

barStyle สามารถมีสามค่า - dark-content, light-content และ default.

ส่วนประกอบนี้มีคุณสมบัติอื่น ๆ อีกมากมายที่สามารถใช้ได้ บางส่วนเป็นเฉพาะ Android หรือ IOS คุณสามารถตรวจสอบได้ในเอกสารอย่างเป็นทางการ

App.js

import React, { Component } from 'react';
import { StatusBar } from 'react-native'

const App = () => {
   return (
      <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/>
   )
}
export default App

หากเราเรียกใช้แอปแถบสถานะจะมองเห็นได้และเนื้อหาจะมีสีเข้ม

เอาต์พุต