fix: provide navigation prop in header

This commit is contained in:
satyajit.happy
2019-09-17 18:13:42 +02:00
parent 114a5dc888
commit 30e510d123
5 changed files with 63 additions and 48 deletions

View File

@@ -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;

View File

@@ -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>

View File

@@ -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}

View 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>