react-native-navigator-animation
Custom page switch animation.
Install
npm install react-native-navigator-animation --save
Use
;let buildStyleInterpolator = ;let NavAnimate = ; <Navigator initialRoute=Routes configureScene={ // here return NavAnimateAnimationScaleInRightDown; } renderScene={ let Component = routecomponent; return <Component ...routeparams RootNavigator=navigator /> }/>
Document
Animation has been defined:
AnimationScaleInRight
AnimationScaleInRightDown
AnimationScaleInRightUp
AnimationRotateInLeft
SwitchMain
(switch tab no animation)
Custom animation API:
CustomAnimation("actionIn","actionOut",[gesture Object],[base Object])
Optional value of the first parameter:
// In was parameter "actionIn"// Out was parameter "actionOut" //{first parameter ,Second parameter}UpLeftInUpLeftOutUpRightInUpRightOutDownLeftInDownLeftOutDownRightInDownRightOutRightInRightOutLeftInLeftOutRotateRightInRotateLeftOutRotateRightinUpRotateLeftoutUpRotateiInYRotateOutYRotateInXRotateOutXCenterScaleInCenterScaleOut
You can use it like this:
;// Or mix;
The third parameter is gesture
:
pop: ...BaseLeftToRightGesture direction:"left-to-right" fullDistance:Width jumpForward:null jumpBack:null jumpTo:null
The four parameter is base
:
// Rebound spring parameters when transitioning FROM this scene springFriction: 26 springTension: 200 // Velocity to start at when transitioning without gesture defaultTransitionVelocity: 15
The BaseLeftToRightGesture
Default value:
const BaseLeftToRightGesture = // If the gesture can end and restart during one continuous touch isDetachable: false // How far the swipe must drag to start transitioning gestureDetectMovement: 2 // Amplitude of release velocity that is considered still notMoving: 03 // Fraction of directional move required. directionRatio: 066 // Velocity to transition with when the gesture release was "not moving" snapVelocity: 2 // Region that can trigger swipe. iOS default is 30px from the left edge edgeHitWidth: 30 // Ratio of gesture completion when non-velocity release will cause action stillCompletionRatio: 3 / 5 fullDistance: Width direction: 'left-to-right';
You can use like this:
;let buildStyleInterpolator = ;let NavAnimate = ; NavAnimate
Example
- step 1
git clone https://github.com/zhouyuexie/react-native-navigator-animation.git
- step 2
cd ./react-native-navigator-animation/example
- step 3
npm install
- step 4
react-native run-ios
UpdateLog
- 1.2.0:
CustomAnimation
accept four parameters, the fourth argument is an object that contains the control animation parameters