전단 RN 루트 입문 부터 실전 까지

전단 경로
1.1 머리말
오늘 의 화 제 를 시작 하기 전에 먼저 전단 경 로 를 알 아 보 겠 습 니 다. Ajax 가 탄생 한 후에 매번 사용자 작업 이 서버 측 에 전체 페이지 를 다시 닦 아 달라 고 요청 하 는 문 제 를 해 결 했 습 니 다. 그러나 이에 따 른 문 제 는 Ajax 작업 상 태 를 저장 할 수 없고 브 라 우 저의 전진 후퇴 기능 도 사용 할 수 없습니다. 현재 유행 하 는 두 가지 해결 방법 은:
  • hash hash 의 원래 역할 은 긴 문서 페이지 에 닻 점 정 보 를 추가 하 는 것 입 니 다. url 새로 고침 기능 을 바 꾸 지 않 기 때문에 자 연 스 럽 게 Ajax 작업 상 태 를 기록 하 는 데 사 용 됩 니 다
  • history 는 history 가 주류 의 해결 방안 이 라 고 해 야 합 니 다. 브 라 우 저의 전진 후퇴 는 바로 이것 입 니 다. 이것 은 window 대상 에서 제 공 된 것 입 니 다. 예전 의 history 가 제공 한 방법 은 페이지 간 의 전진 후퇴 만 할 수 있 습 니 다.
  • 1.2, history 전진 후퇴 방법
  • histoy. go (number | URL) 과거 기록 목록 의 구체 적 인 페이지 를 불 러 올 수 있 습 니 다
  • history. forward () 과거 기록 목록 의 다음 URL 을 불 러 올 수 있 습 니 다
  • history. back () 과거 기록 목록 의 이전 URL 을 불 러 올 수 있 습 니 다
  • 1.3, H5 새로운 방법
    history 를 이전 페이지 로 되 돌 릴 수 있 을 뿐만 아니 라 이전 작업 상태 로 돌아 갈 수 있 도록 합 니 다.HTML 5 는 세 가지 방법 을 추 가 했 는데 그 중 두 가 지 는 history 대상 에 있 습 니 다.
  • history. pushstate (state, title, url) 에 역사 기록 을 추가 합 니 다. state 는 매개 변 수 를 전달 하 는 데 사용 되 며 비어 있 습 니 다.title 은 과거 기록 을 설정 한 제목 으로 비어 있 을 수 있 습 니 다.url 은 과거 기록 의 URL 입 니 다. 비어 있 으 면 안 됩 니 다.
  • history. replace State (state, title, url) 는 history 스 택 의 현재 기록 을 이곳 의 url 로 바 꾸 고 매개 변 수 는 같 습 니 다.

  • 1.4. window 에서 새로 추 가 된 방법
    window. onpoptate () 감청 url 의 변 화 는 hash 의 변 화 를 무시 합 니 다 (hash 변화 에 onhashchange 이벤트 가 있 습 니 다). 그러나 앞의 두 사건 은 촉발 되 지 않 습 니 다.
    요약:
    단일 페이지 응용 프로그램 이나 Ajax 작업 기록 상 태 는 hash 와 h5 가 증가 하 는 history API 를 사용 합 니 다. 이것 이 바로 react - router - dom 확장 경로 입 니 다. 이것 은 웹 응용 에서 가장 자주 사용 하 는 두 가지 경로 입 니 다.
    1.5. react 경로
    //        
    import ReactDom from 'react-dom';
    import { Router, Route, hashHistory,IndexRoute} from 'react-router';
    
    //      
    ReactDom.render(
         
            
            
            
            
         
        ,document.getElementById("app"));

    정적 경로
    react 프로젝트 를 시작 할 때 사용자 가 좋 은 경로 표 가 되 고 페이지 가 이동 할 때 react 는 주소 에 따라 경로 표 에서 해당 하 는 처리 페이지 나 처리 방법 을 찾 습 니 다.
    동적 경로
    동적 루트 는 프로젝트 가 실행 중인 프로필 로 외부 에 저장 되 는 것 이 아니 라 프로젝트 render 에서 정 의 됩 니 다. 루트 작성 자 는 루트 가 다른 일반 구성 요소 와 마찬가지 로 루트 설정 을 제공 하 는 것 이 아니 라 일반적인 UI 구성 요소 라 고 생각 합 니 다.
    React Native 경로
    2.1 RN 에서 react - router 사용 시도
    import React, { Component } from 'react';
    import { Provider } from 'react-redux';
    import { StatusBarIOS,Platform } from 'react-native';
    import { createMemoryHistory, Router, IndexRoute, Route } from 'react-router';
    import { createNavigatorRouter } from 'react-native-navigator-router';
    
    
    
        
            
                
                
            
        
    

    React Native 버 전 으로 0.44 까지 설계 한 후에 원래 의 RN 경로 가 완전히 효력 을 잃 었 다.
    실행 중 오류 보고, createMemory History ('/') 이상
    구체 적 인 원인 은 잘 모 르 겠 습 니 다. react - router 의 사용 방식 을 제거 한 것 같 습 니 다. 현재...
    2.2、RN Navigator
    우선 원리 적 으로 Navigator 는 구성 요소 간 의 네 비게 이 션 으로 사용 된다.라 우 터 와 유사 한 것 이 없 을 때 가장 쉬 운 방법 은 다음 구성 요소 (장면 Scene 이 라 고도 함) 를 네 비게 이 션 에 직접 알려 주 는 것 이다.그래서 페이지 위 에 다음 구성 요 소 를 도입 해 야 합 니 다.
    export default class SampleComponent extends React.Component {
            render() {
                let defaultName = 'FirstPageComponent';//          
                let defaultComponent = FirstPageComponent;
                return (
                 {
                    return Navigator.SceneConfigs.VerticalDownSwipeJump;
                  }}
                  renderScene={(route, navigator) => {
                    let Component = route.component;
                    return 
                  }} />
                );
            }
        }
    

    initial Route = {{name: defaultName, component: defaultComponent}} Navigator 를 통 해 점프 를 실현 합 니 다. Push 와 Pop 방법 을 통 해 하나의 배열 에 해당 합 니 다. 다음 장면 으로 넘 어 갈 때마다 다음 페이지 를 이 배열 로 Push 하고 뒤로 물 러 나 려 면 이 Pop 을 나 갑 니 다.
    react - native 0.44 부터 Navigatior 를 지원 하지 않 습 니 다.
    2.3、iOS NavigatorIOS
    NavigatorIOS 사용
  • 우선 우 리 는 그 에 게 길 을 지정 해 야 어느 페이지 를 표시 하 는 지 알 수 있다
  • .
  • Navigator 와 마찬가지 로 Navigator IOS 는 루트 보기 로 초기 화 를 완료 해 야 하기 때문에 이 화면 을 설명 할 구성 요 소 를 만 들 고 이 구성 요 소 를 경로 형식 으로 Navigator IOS 에 알려 야 합 니 다
  • .
    1. 루트 보기
    우선 NavigatorIOS 의 루트 보기 로 홈 구성 요 소 를 만 듭 니 다.
    보기 부분:
    render() {
            return (
                
                    
                              
                    
                
            );
        }

    스타일 부분:
    const styles = StyleSheet.create({
        flex: {
            flex: 1,
            marginTop: 65
        },
        listItem: {
            height: 40,
            marginLeft: 10,
            marginRight: 10,
            borderBottomWidth: 1,
            borderBottomColor: "#ddd",
            justifyContent: "center"
        },
        listItemFont: {
            fontSize: 16
        },
        container: {
            justifyContent: "center",
            alignItems: "center"
        }
    });

    2. 예화 경로 설정
    그리고 NavigatorIOS 를 실례 화하 고 경 로 를 설정 합 니 다.
    class Test extends Component {
        render() {
            return (
                
            );
        }
    }

    3. 효과
    4. 점프 와 귀환
    return (
                    
                         {this.props.navigator.push({
                                component:Detail,     //        
                                title:'  '       //          
                                rightButtonTitle: "  ",//          
                                onRightButtonPress: function() {//          
                                    alert("       。");
                                }
                            })}}
                        >
                                  
                         
                    
                );
    

    5. 전체적인 효과
    react-navigation
    인용
    앞에서 소개 한 몇 가지 경로 방식 은 RN 버 전 업데이트 에 따라 더 이상 지원 되 지 않 거나 단일 플랫폼 지원 성 이기 때 문 입 니 다.RN 공식 은 0.44 버 전 이후 네 비게 이 션 경 로 를 react - navigation 라 이브 러 리 에 집중 시 켰 고 공식 적 으로 도 react - navigation 을 사용 하여 제3자 플러그 인 을 적 게 사용 했다.
    react - navigation 추가
    이 라 이브 러 리 는 세 가지 구성 요 소 를 포함 합 니 다:
  • StackNavigator: 페이지 를 뛰 어 넘 고 매개 변 수 를 전달 하 는 데 사용 합 니 다
  • TabNavigator: 아래쪽 네 비게 이 션 바 와 같이 같은 화면 에서 다른 페이지 로 전환 합 니 다
  • DrawerNavigator: 사 이 드 메뉴 탐색 표시 줄, 서랍 이 있 는 화면 을 쉽게 설정 할 수 있 습 니 다
  • npm install --save react-navigation

    방법 참조:
    import { StackNavigator } from "react-navigation";

    3.1、StackNavigator
    구성 요 소 는 스 택 식 페이지 내 비게 이 션 을 사용 하여 각 인터페이스 전환 을 실현 합 니 다.그것 의 구조 함수:
    StackNavigator(RouteConfigs, StackNavigatorConfig)
    RouteConfigs:      
    StackNavigatorConfig:      

    3.1.1 StackNavigator 파라미터
    navigationOptions:  StackNavigator     。  
      
        title:  ,               title       ,       
        header:           ,                   null  
        headerTitle:       ,    
        headerBackTitle:                 ,           。     ,      null  
        headerTruncatedBackTitle:                     ,    "  "  
        headerRight:       。               
        headerLeft:       。               
        headerStyle:        。   ,     
        headerTitleStyle:           
        headerBackTitleStyle:     ‘  ’      
        headerTintColor:         
        headerPressColorAndroid:           ,        5.0  
        gesturesEnabled:          ,iOS    ,        
       
      
    screen:      ,    import       
      
    mode:        
      
       card:  iOS          
      
       modal:iOS           。  iOS present    
      
    headerMode:             
      
       float:iOS       
      
       screen:     ,          
      
       none:     
      
    cardStyle:           
      
       transitionConfig:               
      
       onTransitionStart:                  
      
       onTransitionEnd:       ,         
      
    path:                 
      
    initialRouteName:         ,               
      
    initialRouteParams:       

    3.1.2, RouteConfigs 설정
    RouteConfigs 파라미터 RouteConfigs 파라미터 만 설정 할 수 있 습 니 다. 각 페이지 의 경로 설정 을 표시 합 니 다. React 개발 중인 Router 경로 설정 은 네 비게 이 션 이 필요 한 경로 에 대응 하 는 페이지 임 을 네 비게 이 션 에 알 릴 수 있 습 니 다.
    RN 페이지 경로 설정:
    const AppIndex = StackNavigator(
        { 
            Task: {
                screen: Task,
                //       navigationOptions          
            navigationOptions: ({ navigation }) => ({
                    headerTitle: "  ",
                    headerBackTitle: null
                })
            },
            NewTask: {
                screen: NewTask
            },
            Redeem: {
                screen: Redeem
            },
            Rule: {
                screen: Rule
            }
        }
    );

    3.1.3 경로 전환
    네 비게 이 션 과 대응 하 는 경로 페이지 가 설정 되 어 있 지만 페이지 간 의 점프 를 완성 하려 면 navigation 이 필요 합 니 다.
    내 비게 이 션 의 모든 페이지 에는 navigation 속성 이 있 습 니 다.
            navigationOptions                 ,    Redeem    
    (  :                  static navigationOptions )
    class Redeem extends Component {
        static navigationOptions = ({ navigation }) => ({
            headerTitle: `${navigation.state.params.title}`,
            headerRight: (
                
                    navigation.state.params ? navigation.state.params.jumpToRule() : null
                        }>
                            
                    
                
            )
        });
        .....
    }
         navigationOptions              ,              ,        

    3.1.4 네 비게 이 션 속성
    navigate - 다른 페이지 로 이동
    이 방법 을 사용 하면 네 비게 이 션 의 다른 페이지 로 이동 할 수 있 습 니 다. 이 방법 은 세 개의 인자 가 있 습 니 다.
  • routeName 내 비게 이 션 에 설 정 된 경로 이름
  • params 는 다음 페이지 로 매개 변 수 를 전달 합 니 다
  • action action

  • 우선 페이지 를 넘 어야 할 곳 에 navigate 를 설명 합 니 다.
    const { navigate } = this.props.navigation;
    그리고 이벤트 클릭 을 통 해 navigate 점프 를 호출 합 니 다.
    //          
     navigate("Redeem", { title: "    " })}>
            
    
    //              
    jumpToRule = () => {
            const { navigate } = this.props.navigation;
            navigate("Rule", { title: "      " });
        }

    state - 현재 페이지 탐색 기의 상태
    state 에는 전 달 된 인자 params, key, 경로 이름 route 가 포함 되 어 있 습 니 다 Name
    {
        params: { param: 'i am the param' },
        key: 'id-1500546317301-1',
        routeName: 'Redeem'
    }

    사용:
    headerTitle: `${navigation.state.params.title}`

    setParams - 경로 변경 인자
    현재 페이지 경로 의 인 자 를 변경 합 니 다. 예 를 들 어 머리 단추 나 제목 을 업데이트 할 수 있 습 니 다.
    setParams 사용:
    //               
    headerRight: (
                
                    
                            navigation.state.params ? navigation.state.params.jumpToRule() : null
                        }>
                            
                    
                
            )

    설명:
    내 비게 이 션 표시 줄 의 단 추 를 누 르 면 이 방법 을 호출 해 야 할 때 this. jumpToRule () 을 직접 사용 할 수 없습니다. 주기 적 인 componentDidMount 에서 navigation 의 setParams 를 통 해 함 수 를 내 비게 이 션 에 등록 해 야 합 니 다.
    componentDidMount() {
        this.props.navigation.setParams({ jumpToRule: this.jumpToRule });
    }

    goBack - 복귀, 후퇴.
    전송 하지 않 아 도 되 고 인 자 를 전달 할 수도 있 으 며 null 도 전송 할 수 있 습 니 다.
    this.props.navigation.goBack(); // 이전 페이지 로 되 돌아 가기
    this.props.navigation.goBack(null); // 임의의 페이지 로 되 돌아 가기
    this.props.navigation.goBack('Home'); // 홈 페이지 로 돌아 가기
    dispatch - action 보 내기
    3.2、TabNavigator
    구성 요 소 는 스 택 식 페이지 내 비게 이 션 을 사용 하여 각 인터페이스 전환 을 실현 합 니 다.그것 의 구조 함수:
    TabNavigator(RouteConfigs, TabNavigatorConfig)
    RouteConfigs:  tab  
    TabNavigatorConfig:    

    3.2.1 매개 변수 설정
    screen:          ,      ,           screen     。  
      
      
    navigationOptions:  TabNavigator       
      
    title:  ,             title  
      
    tabBarVisible:       。     (true)  
      
    tabBarIcon:        。          
      
    tabBarLabel:      title。    
      
           
      
    tabBarPosition:  tabbar   ,iOS     ,       。(   :'top','bottom')  
      
    swipeEnabled:               
      
    animationEnabled:              
      
    lazy:            ,     ,    app               ,  false,   true  
      
    trueinitialRouteName:            
      
    backBehavior:  back          Tab(  ), none       
      
    tabBarOptions:          iOS    
      
    activeTintColor:label icon            
      
    activeBackgroundColor:label icon            
      
    inactiveTintColor:label icon             
      
    inactiveBackgroundColor:label icon             
      
    showLabel:    label,     style:tabbar     
      
    labelStyle:label         
      
    activeTintColor:label icon            
      
    inactiveTintColor:label icon             
      
    showIcon:      ,      
      
    showLabel:    label,     style:tabbar     
      
    labelStyle:label    upperCaseLabel:       ,   true  
      
    pressColor:material       (        5.0)  
      
    pressOpacity:          (        5.0)  
      
    scrollEnabled:           tabStyle:tab     
      
    indicatorStyle:          (       )。          ,   height   0           
      
    labelStyle:label     
      
    iconStyle:      

    필요 한 구성 요소 가 져 오기:
    import { TabNavigator } from "react-navigation";
    import Home from "./category/Home";
    import Feedback from "./category/feedback/feedback";

    정의 TabNavigator:
    const MyTab = TabNavigator(
        {
            Home: {
                screen: Home,
                navigationOptions: ({ navigation }) => ({
                    headerTitle: "  ",
                    tabBarLabel: "  ",
                    headerBackTitle: null
                })
            },
            Feed: {
                screen: Feedback,
                navigationOptions: ({ navigation }) => ({
                    headerTitle: "    ",
                    tabBarLabel: "  ",
                    headerBackTitle: null,
                })
            }
        },
        {
            tabBarComponent: TabBarBottom,
            tabBarPosition: "bottom", //  tabbar   ,iOS     ,       。(   :'top','bottom')
            swipeEnabled: true, //           
            animationEnabled: false, //            
            lazy: true, //            ,       ,    app               ,  false,    true
            tabBarOptions: {
                activeTintColor: "#ff552e", //label icon          (  )
                // activeBackgroundColor:'blue',//label icon          
                inactiveTintColor: "#333", //label icon           
                showLabel: true, //    label,    
                showIcon: true, // android       icon,       true     
                style: { backgroundColor: "#ffffff" }, //tabbar   
                labelStyle: {
                    fontSize: 14 //     
                }
            }
        }
    );

    3.3 페이지 내 비게 이 션 과 페이지 전환 혼합 사용
    const MyTab = TabNavigator(
        {
            Home: {
                screen: Home,
                navigationOptions: ({ navigation }) => ({
                    headerTitle: "  ",
                    tabBarLabel: "  ",
                    headerBackTitle: null,
                    tabBarIcon: ({ tintColor }) => (
                        
                    )
                })
            },
            Feed: {
                screen: Feedback,
                navigationOptions: ({ navigation }) => ({
                    headerTitle: "    ",
                    tabBarLabel: "  ",
                    headerBackTitle: null,
                    headerRight: (
                        
                                navigation.state.params ? navigation.state.params.submit() : null
                            }>
                              
                        
                    ),
                    tabBarIcon: ({ tintColor }) => (
                        
                    )
                })
            }
        },
        {
            tabBarComponent: TabBarBottom,
            tabBarPosition: "bottom", //  tabbar   ,iOS     ,       。(   :'top','bottom')
            swipeEnabled: true, //           
            animationEnabled: false, //            
            lazy: true, //            ,       ,    app               ,  false,    true
            tabBarOptions: {
                activeTintColor: "#ff552e", //label icon          (  )
                // activeBackgroundColor:'blue',//label icon          
                inactiveTintColor: "#333", //label icon           
                showLabel: true, //    label,    
                showIcon: true, // android       icon,       true     
                style: { backgroundColor: "#ffffff" }, //tabbar   
                labelStyle: {
                    fontSize: 14 //     
                }
            }
        }
    );
    const AppIndex = StackNavigator(
        {
            Main: {
                screen: MyTab
            },
            Task: {
                screen: Task
            },
            NewTask: {
                screen: NewTask
            },
            Redeem: {
                screen: Redeem
            },
            Rule: {
                screen: Rule
            },
            Test: {
                screen: Test
            }
        },
        {
            initialRouteName: "Task", //       
            navigationOptions: {
                headerTitle: "    ",
                headerBackTitle: null,
                // headerBackTitle: "  ",
                headerTintColor: "#333",
                cardStack: {
                    gesturesEnabled: true //        , iOS    true, Android    false
                }
            },
            // mode: "card", //       ,    card(   iOS  push  ),    modal(   iOS  modal  )
            headerMode: "screen", //         , screen:        , float:      , none:      
            onTransitionStart: () => {}, //   
            onTransitionEnd: () => {} //   
        }
    );

    좋은 웹페이지 즐겨찾기