mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-04-27 21:08:02 +08:00
fix: provide navigation prop in header
This commit is contained in:
@@ -199,6 +199,7 @@ export type BottomTabBarOptions = {
|
||||
|
||||
export type BottomTabBarProps = BottomTabBarOptions & {
|
||||
state: TabNavigationState;
|
||||
descriptors: BottomTabDescriptorMap;
|
||||
navigation: NavigationHelpers<ParamListBase>;
|
||||
onTabPress: (props: { route: Route<string> }) => void;
|
||||
onTabLongPress: (props: { route: Route<string> }) => void;
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
Dimensions,
|
||||
} from 'react-native';
|
||||
import SafeAreaView from 'react-native-safe-area-view';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route, NavigationContext } from '@react-navigation/core';
|
||||
|
||||
import TabBarIcon from './TabBarIcon';
|
||||
import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
|
||||
@@ -261,6 +261,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
|
||||
render() {
|
||||
const {
|
||||
state,
|
||||
descriptors,
|
||||
keyboardHidesTabBar,
|
||||
activeBackgroundColor,
|
||||
inactiveBackgroundColor,
|
||||
@@ -337,26 +338,30 @@ export default class TabBarBottom extends React.Component<Props, State> {
|
||||
getButtonComponent({ route }) || TouchableWithoutFeedbackWrapper;
|
||||
|
||||
return (
|
||||
<ButtonComponent
|
||||
<NavigationContext.Provider
|
||||
key={route.key}
|
||||
onPress={() => onTabPress({ route })}
|
||||
onLongPress={() => onTabLongPress({ route })}
|
||||
testID={testID}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
accessibilityRole={accessibilityRole}
|
||||
accessibilityStates={accessibilityStates}
|
||||
style={[
|
||||
styles.tab,
|
||||
{ backgroundColor },
|
||||
this.shouldUseHorizontalLabels()
|
||||
? styles.tabLandscape
|
||||
: styles.tabPortrait,
|
||||
tabStyle,
|
||||
]}
|
||||
value={descriptors[route.key].navigation}
|
||||
>
|
||||
{this.renderIcon(scene)}
|
||||
{this.renderLabel(scene)}
|
||||
</ButtonComponent>
|
||||
<ButtonComponent
|
||||
onPress={() => onTabPress({ route })}
|
||||
onLongPress={() => onTabLongPress({ route })}
|
||||
testID={testID}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
accessibilityRole={accessibilityRole}
|
||||
accessibilityStates={accessibilityStates}
|
||||
style={[
|
||||
styles.tab,
|
||||
{ backgroundColor },
|
||||
this.shouldUseHorizontalLabels()
|
||||
? styles.tabLandscape
|
||||
: styles.tabPortrait,
|
||||
tabStyle,
|
||||
]}
|
||||
>
|
||||
{this.renderIcon(scene)}
|
||||
{this.renderLabel(scene)}
|
||||
</ButtonComponent>
|
||||
</NavigationContext.Provider>
|
||||
);
|
||||
})}
|
||||
</SafeAreaView>
|
||||
|
||||
@@ -177,6 +177,7 @@ export default class BottomTabView extends React.Component<Props, State> {
|
||||
<TabBarComponent
|
||||
{...tabBarOptions}
|
||||
state={state}
|
||||
descriptors={descriptors}
|
||||
navigation={navigation}
|
||||
onTabPress={this.handleTabPress}
|
||||
onTabLongPress={this.handleTabLongPress}
|
||||
|
||||
0
packages/compat/src/createSwitchNavigator.tsx
Normal file
0
packages/compat/src/createSwitchNavigator.tsx
Normal file
@@ -1,6 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||
import { Route, ParamListBase } from '@react-navigation/core';
|
||||
import {
|
||||
NavigationContext,
|
||||
Route,
|
||||
ParamListBase,
|
||||
} from '@react-navigation/core';
|
||||
import { StackNavigationState } from '@react-navigation/routers';
|
||||
|
||||
import Header from './Header';
|
||||
@@ -92,36 +96,40 @@ export default function HeaderContainer({
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
<NavigationContext.Provider
|
||||
key={scene.route.key}
|
||||
onLayout={
|
||||
onContentHeightChange
|
||||
? e =>
|
||||
onContentHeightChange({
|
||||
route: scene.route,
|
||||
height: e.nativeEvent.layout.height,
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
pointerEvents="box-none"
|
||||
accessibilityElementsHidden={!isFocused}
|
||||
importantForAccessibility={
|
||||
isFocused ? 'auto' : 'no-hide-descendants'
|
||||
}
|
||||
style={
|
||||
mode === 'float' || options.headerTransparent
|
||||
? styles.header
|
||||
: null
|
||||
}
|
||||
value={scene.descriptor.navigation}
|
||||
>
|
||||
{options.header !== undefined ? (
|
||||
options.header === null ? null : (
|
||||
options.header(props)
|
||||
)
|
||||
) : (
|
||||
<Header {...props} />
|
||||
)}
|
||||
</View>
|
||||
<View
|
||||
onLayout={
|
||||
onContentHeightChange
|
||||
? e =>
|
||||
onContentHeightChange({
|
||||
route: scene.route,
|
||||
height: e.nativeEvent.layout.height,
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
pointerEvents="box-none"
|
||||
accessibilityElementsHidden={!isFocused}
|
||||
importantForAccessibility={
|
||||
isFocused ? 'auto' : 'no-hide-descendants'
|
||||
}
|
||||
style={
|
||||
mode === 'float' || options.headerTransparent
|
||||
? styles.header
|
||||
: null
|
||||
}
|
||||
>
|
||||
{options.header !== undefined ? (
|
||||
options.header === null ? null : (
|
||||
options.header(props)
|
||||
)
|
||||
) : (
|
||||
<Header {...props} />
|
||||
)}
|
||||
</View>
|
||||
</NavigationContext.Provider>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user