mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

Native中禁止使用Navigator手势重返的示范代码,通

时间:2019-06-07 20:30来源:www.mg4377.com
在React-Native开采中,平时会用到导航。导航做什么用的吧,轻巧点说就是页面跳转。 在React-Native的耗费中,开掘了三个Bug,从3个分界面跳转到下3个分界面后,假使从荧屏左边向右滑

在React-Native开采中,平时会用到导航。导航做什么用的吧,轻巧点说就是页面跳转。

在React-Native的耗费中,开掘了三个Bug,从3个分界面跳转到下3个分界面后,假使从荧屏左边向右滑,或许从左边向左滑,开掘页面会通过滑行重返到上2个分界面
消除形式:

那事其实挺无聊的。

Navigator轻易利用

那是三个差不离的例子,用Navigator来跳转页面,页面之间传递参数 (代码是ES6语法写的):

class RN_1 extends Component {   
 render(){      
  return(         
   <Navigator       
     initialRoute={{name:'kk', component:List}}            
        configureScene={(route)=>{          
          return Navigator.SceneConfigs.VerticalDownSwipeJump;              
  }}            
    //渲染场景   
             renderScene={(route, navigator)=>{  
                  //便利route所有参数    
                return<route.component {...route.params} navigator={navigator} />     
           }}  
          />   
     );   
 }}

上述代码解释:
initialRoute={{name:'kk', component:List}}

  • 发轫化路由:name正是二级页面包车型大巴title,component是import二级页面
    eg:import Like from './Like';

configureScene={(route)=>{ return Navigator.SceneConfigs.VerticalDownSwipeJump; }}

  • Native中禁止使用Navigator手势重返的示范代码,通过手势诈欺达成Navigation全屏手势重回。布署场景(设置push方式
    还恐怕有壹种push格局:VerticalUpSwipeJump

renderScene={(route, navigator)=>{   return<route.component {...route.params} navigator={navigator} /> }}
  • 遍历route全部参数
    本着于route中负有的参数遍历,传值入List.js

上边是法定给出的API方法。

  1. getCurrentRoutes() - 获取当前栈里的路由,也正是push进来,未有pop掉的那个。
  2. jumpBack() - 跳回此前的路由,当然前提是保留今后的,还是能够再跳回来,会给您保存原样。
  3. jumpForward() - 上二个办法不是调到此前的路由了么,用这么些跳回来就好了。
  4. jumpTo(route) - 跳转到已有的场景并且不卸载。
  5. push(route) - 跳转到新的场景,并且将气象入栈,你能够稍后跳转过去
  6. pop() - 跳转回来还要卸载掉当前光景
  7. replace(route) - 用二个新的路由替换掉当前情况
  8. replaceAtIndex(route, index) - 替换掉钦定系列的路由场景
  9. replacePrevious(route) - 替换掉在此之前的光景
  10. resetTo(route) - 跳转到新的现象,并且复位整个路由栈
  11. immediatelyResetRouteStack(routeStack) - 用新的路由数组来重新载入参数路由栈
  12. popToRoute(route) - pop到路由钦点的情况,在全部路由栈中,处于钦定场景过后的风貌将会被卸载。
  13. popToTop() - pop到栈中的第3个现象,卸载掉全数的别样场景。

个类型中,明显有大多的页面要跳来跳去的,索罗德N就给我们提供了Navigator组件,能够很好的军管页面的跳转。

//  路由转跳的效果,默认是FadeAndroid
  configureScene = (route) => {
    if (route.configureScene) {
      return route.configureScene;
    }
    const conf = Navigator.SceneConfigs.HorizontalSwipeJump;
    conf.gestures = null;
    // 或者是conf.gestures = {};
    return conf;
  }

进度也十分枯燥,只可以当作光棍的消遣。

附注Code
/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Navigator,    Text,    View} from 'react-native';import Like from './Like';import Swiper_Test from './Swiper_Test';class RN_1 extends Component {    render(){        return(            <Navigator                //初始化路由                initialRoute={{name:'kk', component:List}}                //配置场景(设置push方式)                configureScene={(route)=>{                    return Navigator.SceneConfigs.VerticalUpSwipeJump;                }}                //渲染场景                renderScene={(route, navigator)=>{                    //便利route所有参数                    return<route.component {...route.params} navigator={navigator} />                }}            />        );    }}class List extends Component {    constructor(props){        super(props);        this.state={            id:null,        }    }    push(){        const {navigator} = this.props;        if (navigator){            navigator.push({                name:'haha',                component:Swiper_Test,                //往二级界面传参(需要在初始化定义)                params:{                    id:this.props.id                }            });        }    }    render(){        return(            <View style={{flex:1, alignItems:'center', marginTop:25}}>                <Text style={{fontSize:25, color:'red'}}                      onPress={this.push.bind(this)}>PUSH</Text>            </View>        );    }}const styles = StyleSheet.create({    flex:{        flex:1,        marginTop:20,    },    list_item:{        height:40,        marginLeft:10,        marginRight:10,        fontSize:20,        borderBottomWidth:1,        borderBottomColor:'#ddd',        justifyContent:'center',    },    center:{    },    wrapper: {    },    slide1: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#9DD6EB',    },    slide2: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#97CAE5',    },    slide3: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#92BBD9',    },    text: {        color: '#fff',        fontSize: 30,        fontWeight: 'bold',    }});AppRegistry.registerComponent('RN_1', ()=> RN_1);```


最后附上reacrnative中文网链接地址:[Navigator](http://reactnative.cn/docs/0.38/navigator.html#content)

在享有工作做完今后,开采有个bug!在从第三个分界面跳转到下七个分界面后,假诺从荧屏右边向右滑,大概从地方想下滑,你会发觉3个奇妙的事务,那正是页面会通过滑行而回到到上贰个分界面。那让我们很狼狈了,本来策画禁止跳转回来的,只怕重返时还要做些什么管理的,结果什么都没做,直接回到,能够说,这么些效应有一点点不尽人意了。

我们精晓,Navigation暗中同意是有亟待把手指放在显示屏边缘,工夫够使重回动画生效。

于是为了缓解那几个难题,各处找答案,官方网址未有说,论坛也没人回答。于是放置了很久很久,没悟出在今天的而然查找下,终于找到消除方案了。

从技能角度来说,那是怎么落实的啊?

方案首要分三种:

先是,只要愿意挖,你最终会找到UIScreen艾德gePanGestureRecognizer这么个手势。并规定是以此手势来兑现上述意义。

壹,本身定义个configureScene:

然后,你会分析那么些手势。

编辑:www.mg4377.com 本文来源:Native中禁止使用Navigator手势重返的示范代码,通

关键词: React Native 手势 全屏 Navigation React N...