kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-26 23:24:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

- [ReactNative] Rename JSNavigationStack to ReactNavigator, rename scene config | Eric Vicenti

Browse Source
This commit is contained in:
Christopher Chedeau
2015-03-24 20:33:17 -07:00
parent 57337cb3e4
commit 39304ab06b
14 changed files with 163 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
Libraries/CustomComponents/ReactNavigator/ReactNavigatorSceneConfigs.js Normal file
View File

@@ -0,0 +1,279 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ReactNavigatorSceneConfigs
*/
'use strict';
var Dimensions = require('Dimensions');
var PixelRatio = require('PixelRatio');
var buildStyleInterpolator = require('buildStyleInterpolator');
var merge = require('merge');
var SCREEN_WIDTH = Dimensions.get('window').width;
var SCREEN_HEIGHT = Dimensions.get('window').height;
var ToTheLeft = {
// Rotate *requires* you to break out each individual component of
// rotation (x, y, z, w)
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
// Uncomment to try rotation:
// Quick guide to reasoning about rotations:
// http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions
// transformRotateRadians: {
// from: {x: 0, y: 0, z: 0, w: 1},
// to: {x: 0, y: 0, z: -0.47, w: 0.87},
// min: 0,
// max: 1,
// type: 'linear',
// extrapolate: true
// },
transformScale: {
from: {x: 1, y: 1, z: 1},
to: {x: 0.95, y: 0.95, z: 1},
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
opacity: {
from: 1,
to: 0.3,
min: 0,
max: 1,
type: 'linear',
extrapolate: false,
round: 100,
},
translateX: {
from: 0,
to: -Math.round(Dimensions.get('window').width * 0.3),
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
scaleX: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
scaleY: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
};
var FromTheRight = {
opacity: {
value: 1.0,
type: 'constant',
},
transformTranslate: {
from: {x: Dimensions.get('window').width, y: 0, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
translateX: {
from: Dimensions.get('window').width,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
scaleX: {
value: 1,
type: 'constant',
},
scaleY: {
value: 1,
type: 'constant',
},
};
var ToTheBack = {
// Rotate *requires* you to break out each individual component of
// rotation (x, y, z, w)
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
transformScale: {
from: {x: 1, y: 1, z: 1},
to: {x: 0.95, y: 0.95, z: 1},
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
opacity: {
from: 1,
to: 0.3,
min: 0,
max: 1,
type: 'linear',
extrapolate: false,
round: 100,
},
scaleX: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
scaleY: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
};
var FromTheFront = {
opacity: {
value: 1.0,
type: 'constant',
},
transformTranslate: {
from: {x: 0, y: Dimensions.get('window').height, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
translateY: {
from: Dimensions.get('window').height,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
scaleX: {
value: 1,
type: 'constant',
},
scaleY: {
value: 1,
type: 'constant',
},
};
var Interpolators = {
Vertical: {
into: buildStyleInterpolator(FromTheFront),
out: buildStyleInterpolator(ToTheBack),
},
Horizontal: {
into: buildStyleInterpolator(FromTheRight),
out: buildStyleInterpolator(ToTheLeft),
},
};
// These are meant to mimic iOS default behavior
var PastPointOfNoReturn = {
horizontal: function(location) {
return location > SCREEN_WIDTH * 3 / 5;
},
vertical: function(location) {
return location > SCREEN_HEIGHT * 3 / 5;
},
};
var BaseConfig = {
// When false, all gestures are ignored for this scene
enableGestures: true,
// How far the swipe must drag to start transitioning
gestureDetectMovement: 2,
// Amplitude of release velocity that is considered still
notMoving: 0.3,
// Velocity to start at when transitioning without gesture
defaultTransitionVelocity: 1.5,
// Fraction of directional move required.
directionRatio: 0.66,
// Velocity to transition with when the gesture release was "not moving"
snapVelocity: 2,
// Rebound spring parameters when transitioning FROM this scene
springFriction: 26,
springTension: 200,
// Defaults for horizontal transitioning:
isVertical: false,
screenDimension: SCREEN_WIDTH,
// Region that can trigger swipe. iOS default is 30px from the left edge
edgeHitWidth: 30,
// Point at which a non-velocity release will cause nav pop
pastPointOfNoReturn: PastPointOfNoReturn.horizontal,
// Animation interpolators for this transition
interpolators: Interpolators.Horizontal,
};
var ReactNavigatorSceneConfigs = {
PushFromRight: merge(BaseConfig, {
// We will want to customize this soon
}),
FloatFromRight: merge(BaseConfig, {
// We will want to customize this soon
}),
FloatFromBottom: merge(BaseConfig, {
edgeHitWidth: 150,
interpolators: Interpolators.Vertical,
isVertical: true,
pastPointOfNoReturn: PastPointOfNoReturn.vertical,
screenDimension: SCREEN_HEIGHT,
}),
};
module.exports = ReactNavigatorSceneConfigs;