오픈 소스 코드 분석 -react - 기본 - eyepetizer

디렉토리 구조 :

앱 ---- imgs

--- 페이지 ------ 집

------ 탐구

------ 따라

------ 프로필

------ 선택

--- 유틸

과정을 시작합니다

--->하는 index.js ----> /home/InitApp.js (InitApp) ------> 렌더링 () -----------> / 홈 / MainPage --- --->) (렌더링

메인 코드의 요약 :

하는 index.js

AppRegistry.registerComponent ( ' Eyepetizer ' () => InitApp);

InitApp.js

    렌더링 () { 

        반환 (
             < 네비게이터
                 REF = " 네비게이터 " 
                // 볼 수있는 첫 번째 패널의 시작 이후, 즉 기본 페이지를 초기화 응용 프로그램 
                initialRoute = {{이름 : ' MainPage ' , 구성 요소 다음 MainPage}} 

                / * * 
                 * 구성 애니메이션의 페이지뿐만 아니라 다른 애니메이션과 점프를 사용할 수 있습니다 모든 제스처와 애니메이션된다 
                 * 애니메이션, 세 가지가있다 : 푸시, 플로트, 스 와이프, 지원 네 방향은 
                 당신이 webstrom를 사용하는 경우 *, 당신은 소스 지점에 볼 수 또는 I은 첨부 문서를 참조 
                 * / 
                configureScene = {(경로) => {
                     var에 ; 설정을
                     // 페이지가 전환 애니메이션 자체의 정의에 전달되는 결정
                    IF (route.sceneConfig) { 
                        설정 = route.sceneConfig; 
                    } 다른 { 
                        설정 = Navigator.SceneConfigs.HorizontalSwipeJump; 
                    } 
                    // 안 구성 대가 제스처 또는 슬라이드 할 수있는 페이지를 일으킬 
                    = config.gestures 널을 ,
                     복귀 설정하는 단계; 
                }} 

                // 이 초기화 네비게이터 후하는 유지하기 위해 전체 프로젝트처럼 여러 장소에서 사용할 수있는, 주목해야한다 
                renderScene = {(경로, 네비게이터) =>를 { 
                    하여 구성 할 수 = route.component을;
                    반환 <구성 요소 {... 경로. PARAMS } = {네비게이터 네비게이터} /> 
                }}
             /> 
        );

MainPage.js

    () {렌더링 
        창 ( 
            <가 TabNavigator 
                tabBarStyle = {} MainPageStyle.tab_container 
                : 0}} = {{tabBarShadowStyle 높이> 
                {this._renderTabItem (SELECTED_TAG, SELECTED_TITLE, SELECTED_NORMAL, SELECTED_FOCUS)} 
                , {this._renderTabItem (EXPLORE_TAG, EXPLORE_TITLE, EXPLORE_NORMAL을 EXPLORE_FOCUS)} 
                {this._renderTabItem (FOLLOW_TAG, FOLLOW_TITLE, FOLLOW_NORMAL, FOLLOW_FOCUS)} 
                {this._renderTabItem (PROFILE_TAG, PROFILE_TITLE, PROFILE_NORMAL, PROFILE_FOCUS)} 
            </가 TabNavigator> 
        ) 
    } 

    / ** 
     *渲染탭中的의 항목  
     * @param 태그
     * @param 제목
     파라미터 : iconNormal 
     파라미터 : iconFocus 
     * @param 페이지 뷰 
     * @returns XML {} 
     * @private 
     * / 
    _renderTabItem (태그, 제목 iconNormal, iconFocus) { 
        창 ( 
            <TabNavigator.Item 
                선택된 = {this.state.selectedTab == 태그} = 
                표제} = {타이틀 
                titleStyle = {} MainPageStyle.tab_title 
                selectedTitleStyle = {} MainPageStyle.tab_title_selected 
                renderIcon = {() => <영상 소스 = {} iconNormal 스타일 MainPageStyle.tab_icon = {} />}  
                renderSelectedIcon = {() => <이미지 출처 = {iconFocus} 스타일 = {MainPageStyle.tab_icon} />}
                onPress에 = {( ) => this.setState ({selectedTab : 태그})}> 
                {this._createContentPage (태그)}
            </TabNavigator.Item> 
        ) 
    }

오픈 소스 코드 분석 -react - 기본 - eyepetizer

추천