引言
本来打算将React Navigation-Guides这一章内容集中写在这篇文章内的,但由于篇幅太长,阅读的时候很费劲,所以这里将Guides这一章的内容分篇来记录。接下来,我们来看看Different status bar configuration based on route!
基于路由的不同状态栏配置
如果没有导航标题,或者导航标题根据路线更改颜色,则需要确保内容使用正确的颜色。
1 Stack
这是一个简单的使用堆栈的任务。您可以呈现由React Native公开的StatusBar组件,并配置。
import * as React from 'react';
import { Text, StatusBar, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';
function Screen1({ navigation }) {
return (
<SafeAreaView style={[styles.container, { backgroundColor: '#6a51ae' }]}>
<StatusBar barStyle="light-content" backgroundColor="#6a51ae" />
<Text style={{ color: '#fff' }}>Light Screen</Text>
<Button
title="Next screen"
onPress={() => navigation.navigate('Screen2')}
color="#fff"
/>
</SafeAreaView>
);
}
function Screen2({ navigation }) {
return (
<SafeAreaView style={[styles.container, { backgroundColor: '#ecf0f1' }]}>
<StatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
<Text>Dark Screen</Text>
<Button
title="Next screen"
onPress={() => navigation.navigate('Screen1')}
/>
</SafeAreaView>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});
2 Tabs and Drawer
如果使用的是选项卡或抽屉式导航器,则会更复杂一些,因为导航器中的所有页面可能会同时呈现并保持呈现状态—这意味着将使用您设置的最后一个StatusBar配置(可能在选项卡导航器的最后一个选项卡上,而不是用户看到的)。 为了解决这个问题,我们必须让状态栏组件知道页面焦点,并且只有当页面被聚焦时才呈现它。我们可以通过使用useIsFocused hook并创建包装组件来实现:
import * as React from 'react';
import { StatusBar } from 'react-native';
import { useIsFocused } from '@react-navigation/native';
function FocusAwareStatusBar(props) {
const isFocused = useIsFocused();
return isFocused ? <StatusBar {...props} /> : null;
}
现在,我们的页面(Screen1.js和Screen2.js)将使用FocusAwareStatusBar组件,而不是React Native的StatusBar组件:
function Screen1({ navigation }) {
return (
<SafeAreaView style={[styles.container, { backgroundColor: '#6a51ae' }]}>
<FocusAwareStatusBar barStyle="light-content" backgroundColor="#6a51ae" />
<Text style={{ color: '#fff' }}>Light Screen</Text>
<Button
title="Next screen"
onPress={() => navigation.navigate('Screen2')}
color="#fff"
/>
</SafeAreaView>
);
}
function Screen2({ navigation }) {
return (
<SafeAreaView style={[styles.container, { backgroundColor: '#ecf0f1' }]}>
<FocusAwareStatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
<Text>Dark Screen</Text>
<Button
title="Next screen"
onPress={() => navigation.navigate('Screen1')}
/>
</SafeAreaView>
);
}
虽然不是必需的,但您也可以在堆栈导航器的页面中使用FocusAwareStatusBar组件。
上一章节:RN路由-React Navigation--Authentication flows