使用 react-navigation 更改状态栏颜色
Posted
技术标签:
【中文标题】使用 react-navigation 更改状态栏颜色【英文标题】：Change status bar color with react-navigation 【发布时间】：2017-11-03 17:06:18 【问题描述】：我在我的应用程序中使用来自 react-navigation 的 DrawerNavigator。如果没有任何自定义，android 状态栏是蓝色的，而不是黑色的。
我试过了
StatusBar.setBackgroundColor('#000000');
但它只工作几秒钟，然后又变回蓝色。似乎我正在使用的东西将状态栏颜色设置为蓝色。但是，我尝试删除所有依赖项并仅保留 react-navigation，但它仍然会发生，并且 react-navigation 的文档对此没有任何说明。
如何使用 react-navigation 将状态栏颜色设置为黑色？
【问题讨论】：
【参考方案1】：我认为react-navigation 和StatusBar 之间没有任何冲突，但我认为您应该使用<StatusBar> 组件而不是命令式API。这很有可能是由于您的应用程序重新渲染而导致的，它只是切换回默认值，并声明了组件，您确保它不会发生。
<StatusBar backgroundColor='blue' barStyle='light-content' />
您甚至可以为每条路线设置多个路线，以根据路径进行更改。如果您想根据用户更改它并使用redux，请在连接组件中声明它并传递backgroundColor。
【讨论】：
我也试过了，但是没有效果。但是我不确定我应该把它放在哪里。 在您的***根组件或***View。如果您想在两个平台上都使用它，也可以查看 this answer。
谢谢！ （赏金可以在明天颁发）。对于读者：如果您使用 NativeBase，这将不起作用。请参阅此页面以获取解决方案：github.com/GeekyAnts/NativeBase/issues/323【参考方案2】：
就像 Aperçu 所说的那样，react-navigation 和 StatusBar 之间没有冲突。每个屏幕都应该能够在设备的状态栏上设置属性，并且 createNavigationContainer 中定义的容器应该获得状态更改的选项，并本机应用它们。为整个 App 的 StatusBar 试试这个。
const AppContent = StackNavigator(
Home: screen: HomeScreen ,
Secondary: screen: SecondaryScreen ,
);
const App = () =>
<View style=flex: 1>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
// style the bar. barStyle is text and icon color od status bar.
<AppContent />
</View>;
【讨论】：
【参考方案3】：import React, Component from 'react';
import Text, TouchableOpacity, View, StatusBar from 'react-native';
import StackNavigator from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from "../styles/Style";
class ProfileScreen extends Component
static navigationOptions = (navigation) =>
return
headerLeft: (
<TouchableOpacity onPress=() =>
navigation.navigate('DrawerOpen');
>
<Icon name="menu" size=30 color="#fff" style=styles.burgerIcon/>
</TouchableOpacity>
),
title: 'My Profile',
headerRight: (
<Icon name='edit' size=30 color='#fff' style=styles.headerRightIcon/>
),
headerTintColor: "#fff",
headerStyle:
backgroundColor: '#8BC83D',
height: 56,
elevation: null
;
;
render()
return (
<View style=styles.screenContainer>
<StatusBar
backgroundColor="#7CB236"
barStyle="light-content"
/>
<Text style=styles.welcome>
I amsecond reder
</Text>
</View>
);
const ProfileScreenList = StackNavigator(
ProfileScreenIndex: screen: ProfileScreen,
);
export default ProfileScreenList
【讨论】：
【参考方案4】：您是否尝试设置 DrawerNavigator 配置？
Doc 说contentOptions 允许您自定义抽屉内容。
在您定义DrawerNavigator 的文件中，也许是您的router.js 文件。您应该将您的导航器创建为：
const MyApp = DrawerNavigator(
Home:
screen: MyHomeScreen,
contentOptions:
inactiveBackgroundColor: '#000000',
,
);
也许这个页面会对你有所帮助：DrawerNavigator
目前，您的抽屉肯定会在某个时候重新渲染，这就是颜色恢复为蓝色的原因。
【讨论】：
不幸的是它不起作用。我认为 inactiveBackgroundColor 不应该控制状态栏的颜色。 您是否声明了一个 StackNavigator 并在其中添加您的 DrawerNavigator ？因为您可以在那里使用 NavigationOptions 自定义 HeaderStyle。首先，我以为你想改变抽屉背景的颜色，但你想要的是自定义屏幕顶部的标题，对吧？ 既不是抽屉背景也不是标题。我要自定义状态栏(gizmobolt.com/wp-content/uploads/2015/02/…)【参考方案5】：在@Balthazar 的回答之上，如果您使用的是 SafereaView，那么您可能需要在样式表中设置状态栏颜色，如下所示：
SafeArea:
flex: 1,
backgroundColor: StatusBar.setBackgroundColor('black'),
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
附：此代码还检测带有缺口的 android 设备中的 SafeAreaView。
【讨论】：
【参考方案6】：为了避免手动处理屏幕的安装和卸载，例如更新一个 redux 状态，你也可以使用 react 导航的 useIsFocused。
假设您希望路线中的单个屏幕具有深色主题的状态栏：
import StatusBar, View from 'react-native';
import useIsFocused from '@react-navigation/native';
export default function MyDarkScreen()
const isFocused = useIsFocused();
return (
<View>
isFocused &&
<StatusBar
barStyle='dark-content'
translucent
backgroundColor="transparent"
/>
<SomeOtherComponent />
</View>
)
【讨论】：
【参考方案7】：在你的根组件中，你必须导入
状态栏
您可以按照下面的代码。
import React from 'react';
import Text, View, StatusBar from 'react-native';
const Home = () =>
return (
<View style=flex: 1, alignItems: 'center', justifyContent: 'center'>
<StatusBar backgroundColor="#44A72C" barStyle="light-content" />
<Text style=fontFamily: 'UniNeueRegular-Italic'>Home Screen</Text>
</View>
);
;
export default Home;
谢谢！
【讨论】：
【参考方案8】：你可能想用这个，插件navigationbar-react-native！
1、安装插件
npm i navigationbar-react-native --save
2、使用
import React, Component from 'react';
import
AppRegistry,
StyleSheet,
Text,Image,
View,
TouchableOpacity,
from 'react-native';
import NavigationBar from 'navigationbar-react-native';
const ComponentLeft = () =>
return(
<View style= flex: 1, alignItems: 'flex-start' >
<TouchableOpacity style= justifyContent:'center', flexDirection: 'row'>
<Image
source=require('./img/ic_back.png')
style= resizeMode: 'contain', width: 20, height: 20, alignSelf: 'center'
/>
<Text style= color: 'white', >Back Home</Text>
</TouchableOpacity>
</View>
);
;
const ComponentCenter = () =>
return(
<View style= flex: 1, >
<Image
source=require('./img/ic_logo.png')
style=resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center'
/>
</View>
);
;
const ComponentRight = () =>
return(
<View style= flex: 1, alignItems: 'flex-end', >
<TouchableOpacity>
<Text style= color: 'white', > Right </Text>
</TouchableOpacity>
</View>
);
;
class App extends Component
render()
return (
<View style=styles.container>
<NavigationBar
componentLeft = () => <ComponentLeft />
componentCenter = () => <ComponentCenter />
componentRight = () => <ComponentRight />
navigationBarStyle= backgroundColor: ''#215e79''
statusBarStyle = barStyle: 'light-content', backgroundColor: '#215e79'
/>
</View>
);
【讨论】：
以上是关于使用 react-navigation 更改状态栏颜色的主要内容，如果未能解决你的问题，请参考以下文章
react-navigation 4.x navigationOptions 设置导航栏透明
react-navigation 4.x navigationOptions 设置导航栏透明