其實對于 react-native 來說，官方自帶的 StatusBar 已經(jīng)足夠使用了。
iOS 系統(tǒng)的狀態(tài)欄是比較好設(shè)置的，Android 4.4 之后才能支持對狀態(tài)欄的適配。本來 Android 是有點難處理的，但是就目前國內(nèi) Android 機器的系統(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)用的第一個界面是不能在這里進行配置的。
如果需要對第一個界面的狀態(tài)欄做配置，或者對任何一個界面做狀態(tài)欄的設(shè)置，我建議是在 componentDidMount 中配置。如果是在 render, 那么當界面刷新的時候，會造成狀態(tài)欄的閃爍。
代碼格式挺亂的，自己 COPY 下來整理下，應(yīng)該還是挺好懂的。
整個的思路很簡單，等我閑下來了，會整理下，順便發(fā)布 Demo 的。
