美文网首页React Native
react-native-router-flux小技巧

react-native-router-flux小技巧

作者: jay_den | 来源:发表于2018-01-03 17:13 被阅读71次

    ------------ 关闭后退手势-------------
    如果只是关闭某个界面的手势只需要再某个界面中添加 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)
                           }
                       }})}
    
            >
    

    相关文章

      网友评论

        本文标题:react-native-router-flux小技巧

        本文链接:https://www.haomeiwen.com/subject/xnwhnxtx.html