kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-29 04:45:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add a Background component

Browse Source
This commit is contained in:
Satyajit Sahoo
2021-03-22 19:03:09 +01:00
parent dd48fe9b15
commit cbaabc1288
8 changed files with 67 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/bottom-tabs/src/views/BottomTabView.tsx
View File

@@ -1,12 +1,11 @@
import * as React from 'react';
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import { StyleSheet } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
import {
NavigationHelpersContext,
ParamListBase,
TabNavigationState,
useTheme,
} from '@react-navigation/native';
import {
Header,
@@ -34,28 +33,6 @@ type Props = BottomTabNavigationConfig & {
descriptors: BottomTabDescriptorMap;
};
function SceneContent({
isFocused,
children,
style,
}: {
isFocused: boolean;
children: React.ReactNode;
style?: StyleProp<ViewStyle>;
}) {
const { colors } = useTheme();
return (
<View
accessibilityElementsHidden={!isFocused}
importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
style={[styles.content, { backgroundColor: colors.background }, style]}
>
{children}
</View>
);
}
export default function BottomTabView(props: Props) {
const {
tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
@@ -150,26 +127,26 @@ export default function BottomTabView(props: Props) {
visible={isFocused}
enabled={detachInactiveScreens}
>
<SceneContent isFocused={isFocused} style={sceneContainerStyle}>
<BottomTabBarHeightContext.Provider value={tabBarHeight}>
<Screen
route={descriptor.route}
navigation={descriptor.navigation}
headerShown={descriptor.options.headerShown}
headerStatusBarHeight={
descriptor.options.headerStatusBarHeight
}
header={header({
layout: dimensions,
route: descriptor.route,
navigation: descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
options: descriptor.options,
})}
>
{descriptor.render()}
</Screen>
</BottomTabBarHeightContext.Provider>
</SceneContent>
<BottomTabBarHeightContext.Provider value={tabBarHeight}>
<Screen
focused={isFocused}
route={descriptor.route}
navigation={descriptor.navigation}
headerShown={descriptor.options.headerShown}
headerStatusBarHeight={
descriptor.options.headerStatusBarHeight
}
header={header({
layout: dimensions,
route: descriptor.route,
navigation: descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
options: descriptor.options,
})}
style={sceneContainerStyle}
>
{descriptor.render()}
</Screen>
</BottomTabBarHeightContext.Provider>
</ScreenFallback>
);
})}
@@ -187,7 +164,4 @@ const styles = StyleSheet.create({
flex: 1,
overflow: 'hidden',
},
content: {
flex: 1,
},
});