2018.02.09更新：
react-navigation內(nèi)置跳轉(zhuǎn)動(dòng)畫(huà)的路徑發(fā)生了改變除呵，由
react-navigation/src/views/CardStackStyleInterpolator 改為
react-navigation/src/views/CardStack/CardStackStyleInterpolator
---------------------------------------------- 分割線 ----------------------------------------------
使用StackNavigator跳轉(zhuǎn)頁(yè)面時(shí)诀蓉，react-navigation根據(jù)平臺(tái)的不同內(nèi)置了相應(yīng)的跳轉(zhuǎn)動(dòng)畫(huà)息罗。
內(nèi)置的跳轉(zhuǎn)動(dòng)畫(huà)在react-navigation/src/views/CardStack/CardStackStyleInterpolator中较沪，共三種取刃。forHorizontal:從右向左進(jìn)入年扩、forVertical:從下向上進(jìn)入谬晕、forFadeFromBottomAndroid:從底部淡出。
關(guān)于修改默認(rèn)的跳轉(zhuǎn)動(dòng)畫(huà)或者自定義動(dòng)畫(huà)效果凑耻，以下給出兩個(gè)場(chǎng)景太示。
修改整個(gè)棧內(nèi)的頁(yè)面跳轉(zhuǎn)動(dòng)畫(huà)
這種場(chǎng)景是，一個(gè)棧內(nèi)所有頁(yè)面的跳轉(zhuǎn)使用相同的動(dòng)畫(huà)效果香浩，示例代碼如下：
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const CustomerNavigator = StackNavigator({
ScreenKey: { screen: MyScreen },
// other screens
}, {
transitionConfig: () => {
screenInterpolator: CardStackStyleInterpolator.forVertical,
transitionSpec: {
duration: 250,
easing: Easing.bounce,
timing: Animated.timing,
},
},
});
在安卓上運(yùn)行時(shí)类缤，默認(rèn)的跳轉(zhuǎn)動(dòng)畫(huà)效果是forFadeFromBottomAndroid,經(jīng)過(guò)上述配置，CustomerNavigator 內(nèi)的頁(yè)面切換時(shí)邻吭，會(huì)使用forVertical效果餐弱。
transitionSpec內(nèi)可以配置與動(dòng)畫(huà)相關(guān)的屬性。
通過(guò)傳遞參數(shù)決定某頁(yè)面的跳轉(zhuǎn)動(dòng)畫(huà)
在一個(gè)StackNavigator內(nèi)囱晴，可能某些頁(yè)面需要用forHorizontal的跳轉(zhuǎn)方式膏蚓，另一些需要用forVertical的跳轉(zhuǎn)方式，以下是解決方案畸写。
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const TransitionConfiguration = () => ({
screenInterpolator: (sceneProps) => {
const { scene } = sceneProps;
const { route } = scene;
const params = route.params || {};
const transition = params.transition || 'forHorizontal';
return CardStackStyleInterpolator[transition](sceneProps);
},
});
const CustomerNavigator = StackNavigator({
ScreenKey: { screen: MyScreen },
// other screens
}, {
transitionConfig: TransitionConfiguration,
});
假如希望CustomerNavigator內(nèi)的某個(gè)頁(yè)面使用forVertical的跳轉(zhuǎn)動(dòng)畫(huà)效果驮瞧，調(diào)用this.props.navigate('SomeScreenKey', { transition: 'forVertical' });切換頁(yè)面即可。
總結(jié)
本文均使用react-navigation自帶的跳轉(zhuǎn)動(dòng)畫(huà)枯芬，因?yàn)檫@三種跳轉(zhuǎn)方式可以滿(mǎn)足很多需求论笔，希望將來(lái)能內(nèi)置更豐富的效果。
react-navigation支持自定義的跳轉(zhuǎn)動(dòng)畫(huà)效果千所，獲取sceneProps中的layout,position,scene屬性狂魔，以及scene中的index屬性，就能完成自定義動(dòng)畫(huà)的開(kāi)發(fā)淫痰。具體可以參考這篇文章的內(nèi)容最楷。如果想對(duì)其動(dòng)畫(huà)原理有更深的了解，可以學(xué)習(xí)這篇文章待错。
參考資料
- React Native Navigation, custom Scene (Screen) Transitions and interpolations
- issue#1187--Add support for custom transitionConfig
原博文發(fā)布在個(gè)人博客籽孙，歡迎訪問(wèn)！朗鸠！
