标签：nta config one 文章 需要 bit file end nec
目录结构：
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>
)
}
开源代码分析-react-native-eyepetizer
标签：nta config one 文章 需要 bit file end nec
原文地址：https://www.cnblogs.com/xiaoxuebiye/p/11610908.html
