开源代码分析-react-native-eyepetizer

Posted 2020-11-15 xiaoxuebiye

 

目录结构：

app----imgs

     --- pages ------ home

                    ------ explore

                    ------ follow

                    ------ profile

                    ------  selected

     --- utils

 

启动流程：

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

 

主要代码摘要：

index.js

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

 

InitApp.js 

    render() {

        return (
            <Navigator
                ref="navigator"
                //初始化默认页面，也就是启动app后看到的第一屏
                initialRoute={{name: ‘MainPage‘, component: MainPage}}

                /**
                 *  配置页面之间跳转的动画，还有其他动画可以使用,所有动画均带手势
                 *  动画效果有三种:Push,Float,Swipe,支持上下左右四个方向
                 *  如果使用webstrom的话，可以点进去看下源码，或者看我附上的文章
                 */
                configureScene={(route)=> {
                    var config;
                    //先判断一下传入页面是否自己定义了转场动画
                    if (route.sceneConfig) {
                        config = route.sceneConfig;
                    } else {
                        config = Navigator.SceneConfigs.HorizontalSwipeJump;
                    }
                    //禁用config中的手势返回，否则会导致页面可以左右滑动
                    config.gestures = null;
                    return config;
                }}

                //这里需要注意，Navigator一经初始化后，就可以多处使用，整个工程维持一个就好了
                renderScene={(route, navigator)=> {
                    let 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>
        )
    }