React-Native-Navigator导航条-push不同

在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>
        )

    }

项目地址：https://github.com/chjwrr/RN-NatigatorTest