React-Native(Navigator)

Navigator 사용 편이성

이것은 간단한 예로 Navigator로 페이지를 이동하고 페이지 간에 매개 변수(코드는 ES6를 전달한다.

class RN_1 extends Component {   
 render(){      
  return(         
   {          
          return Navigator.SceneConfigs.VerticalDownSwipeJump;              
  }}            
    //       
             renderScene={(route, navigator)=>{  
                  //  route        
                return     
           }}  
          />   
     );   
 }}

위 코드 설명: initialRoute={{name:'kk', component:List}}

초기화 루트:name는 2급 페이지의 타이틀이고,component는 import 2급 페이지eg:import Like from './Like';

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

장면 설정 push )에는push 방식이 있다. VerticalUpSwipeJump

renderScene={(route, navigator)=>{   return }}

route의 모든 매개 변수는route의 모든 에 맞추어 전송List.js

다음은 공식 API 방법입니다.1. getCurrentRoutes () - 현재 창고의 루트를 가져옵니다. 즉push가 들어오고 팝이 떨어지지 않는 루트입니다.2.jumpBack() - 이전의 경로를 되돌려줍니다. 물론 전제는 현재의 것을 보류하고 다시 되돌릴 수 있습니다. 원형을 보존해 드리겠습니다.3. JumpForward () - 이전 방법은 이전의 루트로 바뀌었잖아. 이걸로 뛰면 돼.4. jumpTo(route) - 기존 장면으로 이동하고 제거하지 않습니다.5.push(route) - 새로운 장면으로 이동하고 장면을 창고에 넣으면 잠시 후에 6.pop() - 현재 장면을 되돌려 마운트 해제 7.replace(route) - 현재 장면을 새 경로로 바꿉니다. 8.replaceAtIndex(route, index) - 지정된 시퀀스의 라우팅 장면을 대체합니다. 9.replacePrevious - 이전 장면을 대체합니다. 10.resetTo(route) - 새 장면으로 이동하고 전체 라우팅 스택을 재설정합니다.immediately ResetRouteStack(routeStack) - 라우팅 스택을 새 라우팅 배열로 재설정합니다. 12.popToRoute(route) - pop이 라우팅에 지정된 장면으로 이동하여 전체 라우팅 스택에서 지정된 장면 뒤에 있는 장면이 제거됩니다.13. popTop() - pop이 스택의 첫 번째 장면으로 이동하여 다른 모든 장면을 제거합니다.
메모 코드

/** * 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(            {                    return Navigator.SceneConfigs.VerticalUpSwipeJump;                }}                //                    renderScene={(route, navigator)=>{                    //  route                        return                }}            />        );    }}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(                            PUSH                    );    }}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)