Fix initial scenes rendering for NavigationPagerStyleInterpolator

Summary:
The initial layout used to render scenes does not contain the actual
width and height measured and causes the issue as described at
https://github.com/ericvicenti/navigation-rfc/issues/61

The fix is to update the layout and re-render scenes once layout
is modified. Also scenes renderer should also consider the case that
when the layout is not measured yet.

Reviewed By: ericvicenti

Differential Revision: D3203245

fb-gh-sync-id: 4de89b9b43bc993d7c970c831458bd31c094073e
fbshipit-source-id: 4de89b9b43bc993d7c970c831458bd31c094073e
This commit is contained in:
Hedger Wang 2016-04-25 15:36:18 -07:00 committed by Facebook Github Bot 8
parent 50d6de9448
commit 24f44558f6
1 changed files with 27 additions and 0 deletions

View File

@ -51,6 +51,29 @@ import type {
* +-------------+-------------+-------------+
*/
/**
* Render the initial style when the initial layout isn't measured yet.
*/
function forInitial(props: NavigationSceneRendererProps): Object {
const {
navigationState,
scene,
} = props;
const focused = navigationState.index === scene.index;
const opacity = focused ? 1 : 0;
// If not focused, move the scene to the far away.
const dir = scene.index > navigationState.index ? 1 : -1;
const translate = focused ? 0 : (1000000 * dir);
return {
opacity,
transform: [
{ translateX: translate },
{ translateY: translate },
],
};
}
function forHorizontal(props: NavigationSceneRendererProps): Object {
const {
layout,
@ -58,6 +81,10 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
scene,
} = props;
if (!layout.isMeasured) {
return forInitial(props);
}
const index = scene.index;
const inputRange = [index - 1, index, index + 1];