在初始化
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
属性,判断要推入的页面,最后返回不同的弹入方式。