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

feat: add headerTitleAlign option to center and left align title

Browse Source
This commit is contained in:
satyajit.happy
2019-10-11 14:04:17 +02:00
parent 3563b3ed94
commit afdc69a8dc
4 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
View File

@@ -444,8 +444,7 @@ Array [
pointerEvents="box-none"
style={
Array [
null,
Object {},
false,
Object {
"opacity": undefined,
},
@@ -585,8 +584,7 @@ Array [
pointerEvents="box-none"
style={
Array [
null,
Object {},
false,
Object {
"opacity": undefined,
},

9
packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
View File

@@ -279,8 +279,7 @@ Array [
pointerEvents="box-none"
style={
Array [
null,
Object {},
false,
Object {
"opacity": undefined,
},
@@ -321,6 +320,9 @@ Array [
"right": 0,
"top": 0,
},
Object {
"right": 0,
},
Object {
"opacity": undefined,
},
@@ -616,8 +618,7 @@ Array [
pointerEvents="box-none"
style={
Array [
null,
Object {},
false,
Object {
"opacity": undefined,
},

1
packages/stack/src/types.tsx
View File

@@ -71,6 +71,7 @@ export type HeaderOptions = {
headerTitle?:
| React.ReactNode
| ((props: HeaderTitleProps) => React.ReactNode);
headerTitleAlign?: 'left' | 'center';
headerTitleStyle?: StyleProp<TextStyle>;
headerTitleContainerStyle?: StyleProp<ViewStyle>;
headerTintColor?: string;

42
packages/stack/src/views/Header/HeaderSegment.tsx
View File

@@ -38,6 +38,13 @@ type State = {
leftLabelLayout?: Layout;
};
const DEFAULT_INSETS = {
top: 0,
left: 0,
right: 0,
bottom: 0,
};
const warnIfHeaderStylesDefined = (styles: { [key: string]: any }) => {
Object.keys(styles).forEach(styleProp => {
const value = styles[styleProp];
@@ -143,6 +150,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
leftLabel: previousTitle,
onGoBack,
headerTitle,
headerTitleAlign = Platform.select({
ios: 'center',
default: 'left',
}),
headerLeft: left = onGoBack
? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
: undefined,
@@ -185,7 +196,9 @@ export default class HeaderSegment extends React.Component<Props, State> {
previousTitle ? leftLabelLayout : undefined
);
const statusBarHeight = this.context ? this.context.top : 0;
const insets = this.context || DEFAULT_INSETS;
const statusBarHeight = insets.top;
const {
height = getDefaultHeaderHeight(layout, this.context),
@@ -324,7 +337,12 @@ export default class HeaderSegment extends React.Component<Props, State> {
{leftButton ? (
<Animated.View
pointerEvents="box-none"
style={[styles.left, leftButtonStyle, leftContainerStyle]}
style={[
styles.left,
{ left: insets.left },
leftButtonStyle,
leftContainerStyle,
]}
>
{leftButton}
</Animated.View>
@@ -332,11 +350,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
<Animated.View
pointerEvents="box-none"
style={[
Platform.select({
ios: null,
default: { left: leftButton ? 72 : 16 },
}),
styles.title,
headerTitleAlign === 'left' && {
position: 'absolute',
left: leftButton ? 72 : 16,
},
titleStyle,
titleContainerStyle,
]}
@@ -353,7 +370,12 @@ export default class HeaderSegment extends React.Component<Props, State> {
{right !== undefined ? (
<Animated.View
pointerEvents="box-none"
style={[styles.right, rightButtonStyle, rightContainerStyle]}
style={[
styles.right,
{ right: insets.right },
rightButtonStyle,
rightContainerStyle,
]}
>
{typeof right === 'function'
? right({
@@ -393,8 +415,4 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'flex-end',
},
title: Platform.select({
ios: {},
default: { position: 'absolute' },
}),
});