研究RN一段时间了，也做了个小项目。
总结一下经验，分享一下心得。
我是从iOS过来的，做RN感觉还真是得心应手。两者的理念还是比较相近的——组件化编程。然后RN的界面布局方案遥遥领先iOS的layout方案。真心不错！各种callback、return多值等js优势就不说了。下面我将会不定期分享我的项目。请大家多关注。
1、Tabbar式布局以及导航
我接到的需求是做一个tabbar为基础框架的app。看了官方文档后发现tabbar的官方实现是无法跨平台的。于是找到了一个替代方案：react-native-tab-navigator。总的来说这个库还是面面俱到的，但是对于我们国内习惯一般tabbar显示在第一个页面，然后下级页面一般隐藏的，然后每个tabbar项目分别为navigator。于是我解决方案如下：
---index.ios.js---
render() {
return (
<Navibar></Navibar>
);
}
---Navibar.js---
renderScene(route, navigator) {
return <route.component
navigator = {navigator}
{...route.passProps}
route = {route}
/>;
}
render() {
return (
<Navigator
style = {{flex:1}}
initialRoute = {{name: 'Tabbar', component: Tabbar}}
renderScene = {this.renderScene}
/>
);
}
重点是navigator作为props传给买个独立tab页，作为tab页的导航器
---Tabbar.js---
/** 渲染tabbar **/
renderTabView(title, tabNomal, tabPress, tabName, tabContent){
return(
<TabNavigatorItem
title = {title}
renderIcon = {() => <Image source = {tabNomal}/>}
renderSelectedIcon = {() => <Image source = {tabPress}/>}
selected = {this.state.selectedTab === tabName}
selectedTitleStyle={{color: '#f85959'}}
onPress = {() => this.onPress(tabName)}
>
{tabContent}
</TabNavigatorItem>
);
}
/** 自定义tabbar **/
tabBarView(){
return (
<TabNavigator tabBarStyle = {styles.tabbar}>
{this.renderTabView('1', TAB_NORMAL_1, TAB_PRESS_1, '1', this.renderFirstViewContent())}
{this.renderTabView('2', TAB_NORMAL_2, TAB_PRESS_2, '2', this.renderSecondViewContent())}
{this.renderTabView('3', TAB_NORMAL_3, TAB_PRESS_3, '3', this.renderThirdViewContent())}
</TabNavigator>
);
}
/** 渲染第一个页面 **/
renderFirstViewContent() {
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>first</Text>
</View>
)
}
/** 渲染第二个页面 **/
renderSecondViewContent() {
return(
<SecondVC navigator = {this.props.navigator} route = {this.props.route}></SecondVC>
)
}
/** 渲染第三个页面 **/
renderThirdViewContent() {
return(
<ThirdVC navigator = {this.props.navigator} route = {this.props.route}></ThirdVC>
)
}
render() {
let tabBarView = this.tabBarView();
return (
<View style={styles.container}>
{tabBarView}
</View>
);
}
}
tab页面直接使用this.props.navigator.push了，然后我还做了一个NavibarView.js同样作为props传进去方便自定义导航栏左右键设置。
---SecondVC.js---
/**
* push到详情页
*/
pushPostDetail(postItem) {
this.props.navigator.push({
title: "Delivery details",
component: PostdetailVC,
passProps: {
postItem: postItem
},
});
}
render() {
return (
<View style = {styles.baseView}>
<NavibarView
routeName = {this.props.route.name}
navigator = {this.props.navigator}
titleText = 'SecondVC'
rightBtnText = '➡️'
/>
<ListView
dataSource = {this.state.dataSource}
renderRow = {this.setupCells.bind(this)}
style = {styles.listViewStyle}
onEndReached = {this.loadMore.bind(this)}
/>
<TouchableOpacity style = {{height: 60, backgroundColor: '#f00'}} onPress = {() => {AsyncStorage.clear()}}></TouchableOpacity>
</View>
);
}
}
到这里为止一个tabbar+navigtor的基础框架出来了。
下一篇将会分享网络实现。敬请期待！
