React Native

react-native-router-flux小技巧

2018-01-03  本文已影响71人  jay_den

------------ 关闭后退手势-------------
如果只是关闭某个界面的手势只需要再某个界面中添加 panHandlers={null}

 <Scene key="MeTest" component={Me}  panHandlers={null}/>

如果想关闭全部界面就只需要再根视图中添加

    <Scene key="root" panHandlers={null}>

-------------显示左边文字-------------
方法一:

 <Scene
                component={Test}
                key="Test"
                modal={true}

                leftTitle="关闭"
               onLeft={Actions.pop}
        />

或者


左边文字

方法二:

   <Scene
                component={Test}
                key="Test"
                modal={true}

                 // leftTitle="关闭"
                 onLeft={ Actions.pop}
        />
 static onEnter = () => {
        Actions.refresh({
       
            leftTitle:'左边文字',
            onLeft: () => {
                alert('点击')
                Actions.pop()
            },
        });
    };

-----------------过渡动画的选择-------------------
如果全部界面都是同一种过渡动画那么可以在根视图中设置一种:

<Stack key="root"
               titleStyle={{ alignSelf: 'center' }}
                transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal })}
        >

如果某个界面要有不同的效果,需要把设置改一下

<Stack key="root"
               titleStyle={{ alignSelf: 'center' }}

               //过渡动画
               transitionConfig={() => ({
                   screenInterpolator: (props) => {
                       const { scene } = props
                  switch (scene.route.routeName) {
                           /* case yourKeyScene:
                        return theAnimationYouWant(props)*/
                  case 'groups':
                    return CardStackStyleInterpolator.forVertical(props)
                  case 'home':
                    return CardStackStyleInterpolator.forHorizontal(props)
                  case 'inbox':
                    return CardStackStyleInterpolator.forFade(props)
                   default:
                     return CardStackStyleInterpolator.forHorizontal(props)
                       }
                   }})}

        >
上一篇下一篇

猜你喜欢

热点阅读