React Native的編程思想類似于iOS, 導(dǎo)航欄也使用Navigator作為標(biāo)識(shí), 類似于Android的ActionBar. 導(dǎo)航欄作為最重要的應(yīng)用組件之一, 除了處理頁面導(dǎo)航功能以外, 還會(huì)提供頁面棧的管理, 管理頁面的跳入和跳出. 本文介紹 Navigator 組件的使用方式.
本文源碼的GitHub下載地址
關(guān)于React Native項(xiàng)目的啟動(dòng), 參考1, 參考2.
簡(jiǎn)單使用
Navigator
添加 Navigator 的組件<Navigator/>. 設(shè)置方法: 初始化路由(initialRoute), 配置場(chǎng)景動(dòng)畫(configureScene), 渲染場(chǎng)景(renderScene). 初始化路由(initialRoute), 使用FirstPage頁面作為首頁.
// 主模塊
class SimpleView extends Component {
// ...
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{component: FirstPage}}
configureScene={this.configureScene}
renderScene={this.renderScene}/>
);
}
}
配置場(chǎng)景動(dòng)畫(configureScene): 根據(jù)路由的type屬性, 判斷使用的動(dòng)畫樣式, 底部彈出或右側(cè)彈出.
/**
* 配置場(chǎng)景動(dòng)畫
* @param route 路由
* @param routeStack 路由棧
* @returns {*} 動(dòng)畫
*/
configureScene(route, routeStack) {
if (route.type == 'Bottom') {
return Navigator.SceneConfigs.FloatFromBottom; // 底部彈出
}
return Navigator.SceneConfigs.PushFromRight; // 右側(cè)彈出
}
渲染場(chǎng)景(renderScene): 使用動(dòng)態(tài)加載組件的方式. 設(shè)置加載頁面的navigator參數(shù), 其余使用route.passProps屬性傳遞其他參數(shù).
/**
* 使用動(dòng)態(tài)頁面加載
* @param route 路由
* @param navigator 導(dǎo)航器
* @returns {XML} 頁面
*/
renderScene(route, navigator) {
return <route.component navigator={navigator} {...route.passProps} />;
}
也可以使用靜態(tài)加載組件, 需要預(yù)定義組件, 沒有動(dòng)態(tài)加載靈活.
/**
* 渲染場(chǎng)景, 通過不同參數(shù), 設(shè)置不同頁面
* @param route 路由, 場(chǎng)景信息
* @param navigator 導(dǎo)航器
* @returns {XML} 頁面
*/
renderScene(route, navigator) {
if (route.name == 'FirstPage') {
return <FirstPage navigator={navigator} {...route.passProps}/>
} else if (route.name == 'SecondPage') {
return <SecondPage navigator={navigator} {...route.passProps}/>
}
}
第一頁
FirstPage組件: 包含導(dǎo)航欄標(biāo)題和兩個(gè)跳轉(zhuǎn)按鈕. 提供兩種跳轉(zhuǎn)動(dòng)畫, 右出和底部. 點(diǎn)擊按鈕調(diào)用_navigate()方法, 跳轉(zhuǎn)到第二頁.
// 第一頁. 使用Component可以自動(dòng)生成注釋, 符合標(biāo)準(zhǔn)
class FirstPage extends Component {
// ...
render() {
return (
<View style={styles.container}>
<View style={styles.heading}>
<Text style={styles.headText}>
{'第一頁'}
</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={()=>this._navigate('你好! (來源第一頁:右出)')}>
<Text style={styles.buttonText}>
{'跳轉(zhuǎn)至第二頁(右出)'}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={()=>this._navigate('你好! (來源第一頁:底出)', 'Bottom')}>
<Text style={styles.buttonText}>
{'跳轉(zhuǎn)至第二頁(底部)'}
</Text>
</TouchableOpacity>
</View>
);
}
}
也可以使用
var FirstPage = React.createClass()創(chuàng)建組件, 但沒有使用繼承Component方式規(guī)范, 不能自動(dòng)生成注釋.
_navigate()方法: 導(dǎo)航跳轉(zhuǎn), 調(diào)用navigator.push()方法. 傳遞參數(shù)passProps的name屬性, type動(dòng)畫類型, component跳轉(zhuǎn)組件.
/**
* 給Navigator傳遞參數(shù).
* @param name 參數(shù)
* @private
*/
_navigate(name, type = 'Normal') {
this.props.navigator.push({
component: SecondPage,
passProps: {
name: name
},
type: type
})
}
下劃線表示私有方法, 類似Java的private限定符.
第二頁
SecondPage組件: 第二頁, 跳出返回第一頁. 調(diào)用navigator.pop()方法, 使用當(dāng)前頁面出棧, 顯示上一個(gè)棧內(nèi)頁面.
// 第二頁, 點(diǎn)擊跳出返回第一頁
class SecondPage extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.heading}>
<Text style={styles.headText}>
第二頁: {this.props.name}
</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={()=>this.props.navigator.pop()}>
<Text style={styles.buttonText}>
返回上一頁
</Text>
</TouchableOpacity>
</View>
);
}
}
Navigator的主要功能, 是管理頁面棧, 控制頁面的跳入跳出.
統(tǒng)一導(dǎo)航欄
對(duì)于應(yīng)用而言, 需要統(tǒng)一的導(dǎo)航欄, Navigator 組件也提供導(dǎo)航欄的定制.
Navigator
與上文類似, 額外添加navigationBar的屬性, 自定義設(shè)置導(dǎo)航欄, 保持所有頁面的導(dǎo)航欄一致. 屬性添加<NavigationBar/>標(biāo)簽, 通過routeMapper控制導(dǎo)航欄的功能和樣式.
// 主模塊
class UniformView extends Component {
//...
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{name: 'FirstPage', component: FirstPage}}
configureScene={this.configureScene}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
style={styles.navContainer}
routeMapper={NavigationBarRouteMapper}/>}
/>
);
}
}
NavigationBarRouteMapper
NavigationBarRouteMapper: 導(dǎo)航欄路由映射器, 設(shè)置左鍵LeftButton, 右鍵RightButton, 標(biāo)題Title.
// 導(dǎo)航欄的Mapper
var NavigationBarRouteMapper = {
// 左鍵
LeftButton(route, navigator, index, navState) {
// ...
},
// 右鍵
RightButton(route, navigator, index, navState) {
// ...
},
// 標(biāo)題
Title(route, navigator, index, navState) {
return (
<View style={styles.navContainer}>
<Text style={styles.title}>
應(yīng)用標(biāo)題
</Text>
</View>
);
}
};
左鍵LeftButton: index屬性表示當(dāng)前頁面的索引, 通過判斷index屬性, 獲知棧內(nèi)是否有其他頁面, 判斷后退按鈕是否顯示. 點(diǎn)擊調(diào)用navigator.pop()出棧.
// 左鍵
LeftButton(route, navigator, index, navState) {
if (index > 0) {
return (
<View style={styles.navContainer}>
<TouchableOpacity
underlayColor='transparent'
onPress={() => {if (index > 0) {navigator.pop()}}}>
<Text style={styles.leftNavButtonText}>
后退
</Text>
</TouchableOpacity>
</View>
);
} else {
return null;
}
},
右鍵RightButton: 點(diǎn)擊調(diào)用路由(route)的onPress()方法, 提示信息. 根據(jù)路由的rightText屬性添加顯示文字.
// 右鍵
RightButton(route, navigator, index, navState) {
if (route.onPress)
return (
<View style={styles.navContainer}>
<TouchableOpacity
onPress={() => route.onPress()}>
<Text style={styles.rightNavButtonText}>
{route.rightText || '右鍵'}
</Text>
</TouchableOpacity>
</View>
);
},
第一頁/第二頁
第一頁與第二頁與上文類似, 當(dāng)?shù)谝豁撎D(zhuǎn)時(shí), 傳遞的路由信息有些變化, 控制第二頁與導(dǎo)航欄的顯示信息.
// 填出提示框
onPress() {
alert("我是Spike!");
}
/**
* 跳轉(zhuǎn)頁面至SecondPage
* @param name 傳遞參數(shù)
* @param type 動(dòng)畫類型
*/
gotoNext(name, type = 'Normal') {
this.props.navigator.push({
component: SecondPage,
passProps: {
id: name
},
onPress: this.onPress,
rightText: 'ALERT!',
type: type
})
}
React Native 路由的基本功能就是這些, 控制頁面的切換, 控制導(dǎo)航欄的功能. 導(dǎo)航欄作為應(yīng)用最重要的組件之一, 一定要熟練掌握.
OK, that's all ! Enjoy it!
