研究RN一段時(shí)間了，也做了個(gè)小項(xiàng)目。
總結(jié)一下經(jīng)驗(yàn)，分享一下心得。
我是從iOS過來的，做RN感覺還真是得心應(yīng)手。兩者的理念還是比較相近的——組件化編程。然后RN的界面布局方案遙遙領(lǐng)先iOS的layout方案。真心不錯(cuò)！各種callback、return多值等js優(yōu)勢(shì)就不說了。下面我將會(huì)不定期分享我的項(xiàng)目。請(qǐng)大家多關(guān)注。
1、Tabbar式布局以及導(dǎo)航
我接到的需求是做一個(gè)tabbar為基礎(chǔ)框架的app。看了官方文檔后發(fā)現(xiàn)tabbar的官方實(shí)現(xiàn)是無法跨平臺(tái)的。于是找到了一個(gè)替代方案：react-native-tab-navigator。總的來說這個(gè)庫還是面面俱到的，但是對(duì)于我們國內(nèi)習(xí)慣一般tabbar顯示在第一個(gè)頁面，然后下級(jí)頁面一般隱藏的，然后每個(gè)tabbar項(xiàng)目分別為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}
/>
);
}
重點(diǎn)是navigator作為props傳給買個(gè)獨(dú)立tab頁，作為tab頁的導(dǎo)航器
---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>
);
}
/** 渲染第一個(gè)頁面 **/
renderFirstViewContent() {
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>first</Text>
</View>
)
}
/** 渲染第二個(gè)頁面 **/
renderSecondViewContent() {
return(
<SecondVC navigator = {this.props.navigator} route = {this.props.route}></SecondVC>
)
}
/** 渲染第三個(gè)頁面 **/
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了，然后我還做了一個(gè)NavibarView.js同樣作為props傳進(jìn)去方便自定義導(dǎo)航欄左右鍵設(shè)置。
---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>
);
}
}
到這里為止一個(gè)tabbar+navigtor的基礎(chǔ)框架出來了。
下一篇將會(huì)分享網(wǎng)絡(luò)實(shí)現(xiàn)。敬請(qǐng)期待！
