Open source code analysis -react-native-eyepetizer

 

The directory structure:

App ---- imgs

     --- pages ------ home

                    ------ explore

                    ------ follow

                    ------ profile

                    ------  selected

     --- utils

 

Start the process:

     ---> index.js  ----> /home/InitApp.js (InitApp )  ------> render()----------->  /home/MainPage  ------>  render()

 

Summary of the main code:

index.js

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

 

InitApp.js 

    the render () { 

        return (
             < Navigator
                 REF = " Navigator " 
                // initialize the default page, i.e. after the start of the first panel to see app 
                initialRoute = {{name: ' the MainPage ' , Component: the MainPage}} 

                / * * 
                 * Configuration Jump between pages of animation, as well as other animation can be used, are all animated with gestures 
                 * animation, there are three: Push, Float, Swipe, support four directions 
                 * If you use webstrom, you can look into the source point or see the article I have attached the 
                 * / 
                configureScene = {(route) => {
                     var config;
                     // to determine what the page is passed in its own definition of the transition animation
                    IF (route.sceneConfig) { 
                        config = route.sceneConfig; 
                    } the else { 
                        config = Navigator.SceneConfigs.HorizontalSwipeJump; 
                    } 
                    // Disable config gesture in return, or cause a page can slide 
                    config.gestures = null ;
                     return config; 
                }} 

                // it should be noted that, after an initialization Navigator, can be used in several places, like the entire project to maintain a 
                renderScene = {(route, Navigator) => { 
                    the let the Component = route.component;
                    return <Component {...route.params} navigator={navigator}/>
                }}
            />
        );

 

MainPage.js

    render() {
        return (
            <TabNavigator
                tabBarStyle={MainPageStyle.tab_container}
                tabBarShadowStyle={{height: 0}}>
                {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>
        )
    }

    /**
     * 渲染tab中的item
     * @param tag
     * @param title
     * @param iconNormal
     * @param iconFocus
     * @param pageView
     * @returns {XML}
     * @private
     */
    _renderTabItem(tag, title, iconNormal, iconFocus) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === tag}
                title={title}
                titleStyle={MainPageStyle.tab_title}
                selectedTitleStyle={MainPageStyle.tab_title_selected}
                renderIcon={() => <Image source={iconNormal} style={MainPageStyle.tab_icon}/>}
                renderSelectedIcon={() => <Image source={iconFocus} style={MainPageStyle.tab_icon}/>}
                onPress={() => this.setState({selectedTab: tag})}>
                {this._createContentPage(tag)}
            </TabNavigator.Item>
        )
    }