在初始化
Navigator
的時候大年,一般會設置configureScene
屬性用于設定組件的彈入效果,比如從底往上玉雾,從右往左翔试。。
一般我們這么寫:
<Navigator
initialRoute={{
name: 'Home',
component: Home,
params: {}
}}
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
renderScene={(route, navigator) => {
let Cmp = route.component;
return <Cmp {...route.params} navigator={navigator} />;
}} />
但是我們可能有多個組件复旬,如果每個組件都是同一個彈入方式垦缅,那也太無聊了,所以我們應該設置多個不同的彈入方式:
configureScene={(route, routeStack) => {
const configs = Navigator.SceneConfigs;
switch(route.name) {
case 'SecondPage':
return configs.FloatFromBottom;
default:
return configs.FloatFromRight;
}
}}
原理:在
configureScene
配置中判斷route
的name
屬性驹碍,判斷要推入的頁面壁涎,最后返回不同的彈入方式。