其實(shí)對于 react-native 來說菠红，官方自帶的 StatusBar 已經(jīng)足夠使用了第岖。
iOS 系統(tǒng)的狀態(tài)欄是比較好設(shè)置的，Android 4.4 之后才能支持對狀態(tài)欄的適配试溯。本來 Android 是有點(diǎn)難處理的蔑滓，但是就目前國內(nèi) Android 機(jī)器的系統(tǒng)版本分布來說，最低適配到 4.4 也就是 19 完全是可以的遇绞。
騰訊數(shù)據(jù)分析 的統(tǒng)計都已經(jīng)直接從 4.4 開始統(tǒng)計了键袱，所以完全沒有必要支持 4.4 以下的系統(tǒng)了。
那么 RN 如何適配狀態(tài)欄呢摹闽？
對于 RN 應(yīng)用來說蹄咖，基本都會使用 StackNavigation 做為整個 APP 的導(dǎo)航。本文也是基于這個钩骇，做的狀態(tài)欄適配比藻。
一：創(chuàng)建一個 StackNavigation
見代碼
const StackNavigation = StackNavigator({ Root: { screen: HelloPage, }, AppNavigation: { screen: AppNavigation }, OrderDetail: { screen: OrderDetailScreen, navigationOptions: { title: "訂單詳情", }, });
二： 監(jiān)聽 screen 的切換
<AppNavigation onNavigationStateChange={_onNavigationStateChange}/>
三： 創(chuàng)建_onNavigationStateChange函數(shù)
getCurrentRouteName 函數(shù)，供 _onNavigationStateChange 調(diào)用
function getCurrentRouteName(navigationState) { if (!navigationState) { return null; } const route = navigationState.routes[navigationState.index]; console.log("navigationState.index=" + navigationState.index); console.log("route.routeName=" + route.routeName); // dive into nested navigators if (route.routes) { return getCurrentRouteName(route); } return route.routeName; }
function _onNavigationStateChange(prevState, currentState , action) { const currentScene = getCurrentRouteName(currentState); // const previousScene = getCurrentRouteName(prevState); StatusBar.setHidden(false); switch (currentScene) { case "ProfileScreen": case "OrderScreen": StatusBar.setHidden(false); StatusBar.setBarStyle("light-content", true); if (Platform.OS === "android") { StatusBar.setBackgroundColor(colors.topBar, true); StatusBar.setTranslucent(true); } break; default: StatusBar.setHidden(false); StatusBar.setBarStyle("dark-content", true); if (Platform.OS === "android") { StatusBar.setBackgroundColor("white", true); StatusBar.setTranslucent(true); } break; } }
_onNavigationStateChange 是主要處理邏輯的地方倘屹。
你可以在 switch 語句中根據(jù) StackNavigator 中配置的 screen 名稱银亲，對界面的狀態(tài)欄做統(tǒng)一的處理。
注意：由于 _onNavigationStateChange 只有在 screen 變化的時候才會有效纽匙，所以應(yīng)用的第一個界面是不能在這里進(jìn)行配置的务蝠。
如果需要對第一個界面的狀態(tài)欄做配置，或者對任何一個界面做狀態(tài)欄的設(shè)置烛缔，我建議是在 componentDidMount 中配置馏段。如果是在 render, 那么當(dāng)界面刷新的時候，會造成狀態(tài)欄的閃爍践瓷。
代碼格式挺亂的院喜，自己 COPY 下來整理下，應(yīng)該還是挺好懂的晕翠。
整個的思路很簡單喷舀，等我閑下來了砍濒，會整理下，順便發(fā)布 Demo 的硫麻。
