add headerBackTitleStyle screen option (#1083)

* add headerBackTitleStyle screen option

since the title is customizable, the back title should too.

* add documentation for `headerBackTitleStyle`

* make absence of headerBackTitle not affect return value

* merge styles so current scene can override

If there's no last scene, return the `headerBackTitleStyle` from the
current scene.
Otherwise return the `headerTitleStyle` from the last scene, and the
`headerBackTitleStyle` from the current scene, with the latter having
precedence.

* take headerBackTitleStyle from current scene

also the title style of the last scene is no longer taken into account
This commit is contained in:
Koen Punt 2017-04-28 07:55:15 +02:00 committed by Mike Grabowski
parent 961cf13268
commit c04ea5b492
4 changed files with 10 additions and 2 deletions

View File

@ -128,6 +128,10 @@ Style object for the header
Style object for the title component
#### `headerBackTitleStyle`
Style object for the back title
#### `headerTintColor`
Tint color for the header

View File

@ -221,6 +221,7 @@ export type NavigationStackScreenOptions = NavigationScreenOptions & {
headerLeft?: React.Element<*>,
headerBackTitle?: string,
headerTruncatedBackTitle?: string,
headerBackTitleStyle?: Style,
headerPressColorAndroid?: string,
headerRight?: React.Element<*>,
headerStyle?: Style,

View File

@ -136,6 +136,7 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
tintColor={options.headerTintColor}
title={backButtonTitle}
truncatedTitle={truncatedBackButtonTitle}
titleStyle={options.headerBackTitleStyle}
width={width}
/>
);

View File

@ -10,7 +10,7 @@ import {
StyleSheet,
} from 'react-native';
import type { LayoutEvent } from '../TypeDefinition';
import type { LayoutEvent, Style } from '../TypeDefinition';
import TouchableItem from './TouchableItem';
@ -18,6 +18,7 @@ type Props = {
onPress?: () => void,
pressColorAndroid?: ?string,
title?: ?string,
titleStyle?: ?Style,
tintColor?: ?string,
truncatedTitle?: ?string,
width?: ?number,
@ -59,6 +60,7 @@ class HeaderBackButton extends React.PureComponent<DefaultProps, Props, State> {
pressColorAndroid,
width,
title,
titleStyle,
tintColor,
truncatedTitle,
} = this.props;
@ -92,7 +94,7 @@ class HeaderBackButton extends React.PureComponent<DefaultProps, Props, State> {
title &&
<Text
onLayout={this._onTextLayout}
style={[styles.title, { color: tintColor }]}
style={[styles.title, { color: tintColor }, titleStyle]}
numberOfLines={1}
>
{backButtonTitle}