mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-26 07:04:05 +08:00
Export per-platform NavigatorNavigationBarStyles for consistent styling
Summary: This allows for the iOS-style navigation bar on Android and vice versa in order to simplify design. It is entirely optional in that NavigationBars will continue to defauly to their platform-specific style, but you can override it with the `navigationStyles` prop:
```js
<Navigator.NavigationBar
navigationStyles={Navigator.NavigationBar.StylesIOS}
/>
```
Fixes #2995.
Closes https://github.com/facebook/react-native/pull/3028
Reviewed By: @svcscm
Differential Revision: D2527902
Pulled By: @ericvicenti
fb-gh-sync-id: c7b1bfac200b5e03fc0d9dfb8acc8b916c825595
This commit is contained in:
James Ide
committed by
facebook-github-bot-3
facebook-github-bot-3
parent
9f1dab69c1
commit
2c7de35dee
@@ -1,209 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule NavigatorBreadcrumbNavigationBarStyles
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var Dimensions = require('Dimensions');
|
||||
var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
|
||||
|
||||
var buildStyleInterpolator = require('buildStyleInterpolator');
|
||||
var merge = require('merge');
|
||||
|
||||
var SCREEN_WIDTH = Dimensions.get('window').width;
|
||||
var NAV_BAR_HEIGHT = NavigatorNavigationBarStyles.General.NavBarHeight;
|
||||
|
||||
var SPACING = 8;
|
||||
var ICON_WIDTH = 40;
|
||||
var SEPARATOR_WIDTH = 9;
|
||||
var CRUMB_WIDTH = ICON_WIDTH + SEPARATOR_WIDTH;
|
||||
var NAV_ELEMENT_HEIGHT = NAV_BAR_HEIGHT;
|
||||
|
||||
var OPACITY_RATIO = 100;
|
||||
var ICON_INACTIVE_OPACITY = 0.6;
|
||||
var MAX_BREADCRUMBS = 10;
|
||||
|
||||
var CRUMB_BASE = {
|
||||
position: 'absolute',
|
||||
flexDirection: 'row',
|
||||
top: 0,
|
||||
width: CRUMB_WIDTH,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
};
|
||||
|
||||
var ICON_BASE = {
|
||||
width: ICON_WIDTH,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
};
|
||||
|
||||
var SEPARATOR_BASE = {
|
||||
width: SEPARATOR_WIDTH,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
};
|
||||
|
||||
var TITLE_BASE = {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
alignItems: 'flex-start',
|
||||
};
|
||||
|
||||
var FIRST_TITLE_BASE = merge(TITLE_BASE, {
|
||||
left: 0,
|
||||
right: 0,
|
||||
});
|
||||
|
||||
var RIGHT_BUTTON_BASE = {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
overflow: 'hidden',
|
||||
opacity: 1,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
};
|
||||
|
||||
/**
|
||||
* Precompute crumb styles so that they don't need to be recomputed on every
|
||||
* interaction.
|
||||
*/
|
||||
var LEFT = [];
|
||||
var CENTER = [];
|
||||
var RIGHT = [];
|
||||
for (var i = 0; i < MAX_BREADCRUMBS; i++) {
|
||||
var crumbLeft = CRUMB_WIDTH * i + SPACING;
|
||||
LEFT[i] = {
|
||||
Crumb: merge(CRUMB_BASE, { left: crumbLeft }),
|
||||
Icon: merge(ICON_BASE, { opacity: ICON_INACTIVE_OPACITY }),
|
||||
Separator: merge(SEPARATOR_BASE, { opacity: 1 }),
|
||||
Title: merge(TITLE_BASE, { left: crumbLeft, opacity: 0 }),
|
||||
RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 0 }),
|
||||
};
|
||||
CENTER[i] = {
|
||||
Crumb: merge(CRUMB_BASE, { left: crumbLeft }),
|
||||
Icon: merge(ICON_BASE, { opacity: 1 }),
|
||||
Separator: merge(SEPARATOR_BASE, { opacity: 0 }),
|
||||
Title: merge(TITLE_BASE, {
|
||||
left: crumbLeft + ICON_WIDTH,
|
||||
opacity: 1,
|
||||
}),
|
||||
RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 1 }),
|
||||
};
|
||||
var crumbRight = crumbLeft + 50;
|
||||
RIGHT[i] = {
|
||||
Crumb: merge(CRUMB_BASE, { left: crumbRight}),
|
||||
Icon: merge(ICON_BASE, { opacity: 0 }),
|
||||
Separator: merge(SEPARATOR_BASE, { opacity: 0 }),
|
||||
Title: merge(TITLE_BASE, {
|
||||
left: crumbRight + ICON_WIDTH,
|
||||
opacity: 0,
|
||||
}),
|
||||
RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 0 }),
|
||||
};
|
||||
}
|
||||
|
||||
// Special case the CENTER state of the first scene.
|
||||
CENTER[0] = {
|
||||
Crumb: merge(CRUMB_BASE, {left: SPACING + CRUMB_WIDTH}),
|
||||
Icon: merge(ICON_BASE, {opacity: 0}),
|
||||
Separator: merge(SEPARATOR_BASE, {opacity: 0}),
|
||||
Title: merge(FIRST_TITLE_BASE, {opacity: 1}),
|
||||
RightItem: CENTER[0].RightItem,
|
||||
};
|
||||
LEFT[0].Title = merge(FIRST_TITLE_BASE, {opacity: 0});
|
||||
RIGHT[0].Title = merge(FIRST_TITLE_BASE, {opacity: 0});
|
||||
|
||||
|
||||
var buildIndexSceneInterpolator = function(startStyles, endStyles) {
|
||||
return {
|
||||
Crumb: buildStyleInterpolator({
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.Crumb.left,
|
||||
to: endStyles.Crumb.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
}),
|
||||
Icon: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Icon.opacity,
|
||||
to: endStyles.Icon.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
}),
|
||||
Separator: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Separator.opacity,
|
||||
to: endStyles.Separator.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
}),
|
||||
Title: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Title.opacity,
|
||||
to: endStyles.Title.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.Title.left,
|
||||
to: endStyles.Title.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
}),
|
||||
RightItem: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.RightItem.opacity,
|
||||
to: endStyles.RightItem.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
round: OPACITY_RATIO,
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
var Interpolators = CENTER.map(function(_, ii) {
|
||||
return {
|
||||
// Animating *into* the center stage from the right
|
||||
RightToCenter: buildIndexSceneInterpolator(RIGHT[ii], CENTER[ii]),
|
||||
// Animating out of the center stage, to the left
|
||||
CenterToLeft: buildIndexSceneInterpolator(CENTER[ii], LEFT[ii]),
|
||||
// Both stages (animating *past* the center stage)
|
||||
RightToLeft: buildIndexSceneInterpolator(RIGHT[ii], LEFT[ii]),
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Contains constants that are used in constructing both `StyleSheet`s and
|
||||
* inline styles during transitions.
|
||||
*/
|
||||
module.exports = {
|
||||
Interpolators,
|
||||
Left: LEFT,
|
||||
Center: CENTER,
|
||||
Right: RIGHT,
|
||||
IconWidth: ICON_WIDTH,
|
||||
IconHeight: NAV_BAR_HEIGHT,
|
||||
SeparatorWidth: SEPARATOR_WIDTH,
|
||||
SeparatorHeight: NAV_BAR_HEIGHT,
|
||||
};
|
||||
@@ -1,159 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule NavigatorNavigationBarStyles
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var buildStyleInterpolator = require('buildStyleInterpolator');
|
||||
var merge = require('merge');
|
||||
|
||||
// Android Material Design
|
||||
var NAV_BAR_HEIGHT = 56;
|
||||
var TITLE_LEFT = 72;
|
||||
var BUTTON_SIZE = 24;
|
||||
var TOUCH_TARGT_SIZE = 48;
|
||||
var BUTTON_HORIZONTAL_MARGIN = 16;
|
||||
|
||||
var BUTTON_EFFECTIVE_MARGIN = BUTTON_HORIZONTAL_MARGIN - (TOUCH_TARGT_SIZE - BUTTON_SIZE) / 2;
|
||||
var NAV_ELEMENT_HEIGHT = NAV_BAR_HEIGHT;
|
||||
|
||||
var BASE_STYLES = {
|
||||
Title: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'flex-start',
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
marginLeft: TITLE_LEFT,
|
||||
},
|
||||
LeftButton: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: BUTTON_EFFECTIVE_MARGIN,
|
||||
overflow: 'hidden',
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
RightButton: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: BUTTON_EFFECTIVE_MARGIN,
|
||||
overflow: 'hidden',
|
||||
alignItems: 'flex-end',
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
};
|
||||
|
||||
// There are 3 stages: left, center, right. All previous navigation
|
||||
// items are in the left stage. The current navigation item is in the
|
||||
// center stage. All upcoming navigation items are in the right stage.
|
||||
// Another way to think of the stages is in terms of transitions. When
|
||||
// we move forward in the navigation stack, we perform a
|
||||
// right-to-center transition on the new navigation item and a
|
||||
// center-to-left transition on the current navigation item.
|
||||
var Stages = {
|
||||
Left: {
|
||||
Title: merge(BASE_STYLES.Title, { opacity: 0 }),
|
||||
LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }),
|
||||
RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }),
|
||||
},
|
||||
Center: {
|
||||
Title: merge(BASE_STYLES.Title, { opacity: 1 }),
|
||||
LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 1 }),
|
||||
RightButton: merge(BASE_STYLES.RightButton, { opacity: 1 }),
|
||||
},
|
||||
Right: {
|
||||
Title: merge(BASE_STYLES.Title, { opacity: 0 }),
|
||||
LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }),
|
||||
RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }),
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
var opacityRatio = 100;
|
||||
|
||||
function buildSceneInterpolators(startStyles, endStyles) {
|
||||
return {
|
||||
Title: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Title.opacity,
|
||||
to: endStyles.Title.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.Title.left,
|
||||
to: endStyles.Title.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
}),
|
||||
LeftButton: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.LeftButton.opacity,
|
||||
to: endStyles.LeftButton.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
round: opacityRatio,
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.LeftButton.left,
|
||||
to: endStyles.LeftButton.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
}),
|
||||
RightButton: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.RightButton.opacity,
|
||||
to: endStyles.RightButton.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
round: opacityRatio,
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.RightButton.left,
|
||||
to: endStyles.RightButton.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
var Interpolators = {
|
||||
// Animating *into* the center stage from the right
|
||||
RightToCenter: buildSceneInterpolators(Stages.Right, Stages.Center),
|
||||
// Animating out of the center stage, to the left
|
||||
CenterToLeft: buildSceneInterpolators(Stages.Center, Stages.Left),
|
||||
// Both stages (animating *past* the center stage)
|
||||
RightToLeft: buildSceneInterpolators(Stages.Right, Stages.Left),
|
||||
};
|
||||
|
||||
|
||||
module.exports = {
|
||||
General: {
|
||||
NavBarHeight: NAV_BAR_HEIGHT,
|
||||
StatusBarHeight: 0,
|
||||
TotalNavHeight: NAV_BAR_HEIGHT,
|
||||
},
|
||||
Interpolators,
|
||||
Stages,
|
||||
};
|
||||
Reference in New Issue
Block a user