在configureScene里面设置的一个push动画效果
configureScene(route) {
return Navigator.SceneConfigs.PushFromRight
}
如果第一个页面push到第二个页面，采用PushFromRight动画
但是第二个push到第三个页面采用FloatFromRight动画
这该如何是好呢
don't worry
I can help 你
不要忘了上面有一个route属性
我们就利用route.type属性进行判断动画类型
当然还有一个route.name属性，具体想怎么样自己看着办吧
有这个需求了，所以每次push我们要传递一个参数，说明要采用哪种动画效果了
所以调用push方法时要加上一个参数
//type就是我们新加的参数
//每次push调用时
//configureScene(route) {return Navigator.SceneConfigs.PushFromRight}这个方法都会执行
goPage2(type) {
this.props.navigator.push({
component:SecondPageComponent,
type:type,//注意这个赋值，
name:'name',//也可以使用name，想怎么样自己看着办
params:{//params 要和HomePage.js里面的 renderScene(route, navigator)里面设置的参数名一样
param1:'第一个参数',
param2:'第二个参数',
}
})
}
//所以我们根据route.type来判断调用push时传的参数
//根据不同的参数实现不同的动画效果
configureScene(route) {
//其他页面点击按钮跳转方法传入参数，在这里通过route.type可以接收到，对参数进行动画的判断
console.log('route.type is ='+route.type);
console.log('route.name is ='+route.name);
if (route.type == 'normal'){
return Navigator.SceneConfigs.PushFromRight
}
return Navigator.SceneConfigs.FloatFromRight
//直接用同一个动画跳转
//return Navigator.SceneConfigs.FloatFromRight
}
所以，当我们调用push方法时，就需要传参数了
render() {
return (
<View style={firstPageStyle.viewStyleBase}>
<TouchableOpacity style={firstPageStyle.opacityStyleBase} onPress={() => this.goPage2('normal')}>
<Text style={firstPageStyle.textStyleBase}>第一页</Text>
</TouchableOpacity>
<Text style={{backgroundColor:'yellow'}}>从第二个页面传过来的值：{this.state.paramData}</Text>
</View>
)
}
