本文純原創(chuàng)咖气，純手打挨措，請大神多多指教。轉(zhuǎn)載請注明出處崩溪！
react-native版本：0.48; 開發(fā)環(huán)境win10+VScode; 目標(biāo)平臺：安卓; 最后更新時(shí)間：2017.09.23;
說到reactnative中頁面跳轉(zhuǎn)官網(wǎng)中已經(jīng)有（使用導(dǎo)航器跳轉(zhuǎn)頁面）
官方在文章中建議我們使用第三方的react-navigation庫
圖片.png
使用這個(gè)庫進(jìn)行頁面跳轉(zhuǎn)很簡單代碼如下
index.android.js文件
import {
AppRegistry,
} from 'react-native';
import {StackNavigator} from 'react-navigation'
import ViewOne from './app/test/route/ViewOne'
import ViewTow from './app/test/route/ViewTow'
import ViewThree from './app/test/route/ViewThree'
const test = StackNavigator({
One:{screen:ViewOne},
Tow:{screen:ViewTow},
Three:{screen:ViewThree},
})
AppRegistry.registerComponent('test', () => test);
ViewOne.js文件
import React, { Component } from 'react';
import {
Button,
View,
Text,
} from 'react-native'
class ViewOne extends Component {
static navigationOptions = {
headerTitle:'ViewOne'
}
render() {
return (
<View>
<Button
onPress={() => { this.props.navigation.navigate('Tow') }}
title='點(diǎn)擊進(jìn)入ViewTow'
/>
</View>
)
}
}
export default ViewOne;
ViewTow.js文件
import React, { Component } from 'react';
import {
Button
} from 'react-native'
import { NavigationActions } from 'react-navigation'
class ViewTow extends Component {
// 這些注釋全部是navigationOptions的屬性 navigationOptions是標(biāo)題欄
// title：標(biāo)題运嗜，如果設(shè)置了這個(gè)導(dǎo)航欄和標(biāo)簽欄的title就會(huì)變成一樣的，所以不推薦使用這個(gè)方法悯舟。
// header：可以設(shè)置一些導(dǎo)航的屬性担租，當(dāng)然如果想隱藏頂部導(dǎo)航條只要將這個(gè)屬性設(shè)置為null就可以了。
// headerTitle：設(shè)置導(dǎo)航欄標(biāo)題抵怎，推薦用這個(gè)方法奋救。
// headerBackTitle：設(shè)置跳轉(zhuǎn)頁面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個(gè)頁面的標(biāo)題反惕〕⑺遥可以自定義，也可以設(shè)置為null
// headerTruncatedBackTitle：設(shè)置當(dāng)上個(gè)頁面標(biāo)題不符合返回箭頭后的文字時(shí)姿染，默認(rèn)改成"返回"背亥。（上個(gè)頁面的標(biāo)題過長，導(dǎo)致顯示不下悬赏，所以改成了短一些的狡汉。）
// headerRight：設(shè)置導(dǎo)航條右側(cè)∶銎模可以是按鈕或者其他盾戴。
// headerLeft：設(shè)置導(dǎo)航條左側(cè)”啵可以是按鈕或者其他尖啡。
// headerStyle：設(shè)置導(dǎo)航條的樣式橄仆。背景色，寬高等衅斩。如果想去掉安卓導(dǎo)航條底部陰影可以添加elevation: 0盆顾，iOS下用shadowOpacity: 0。
// headerTitleStyle：設(shè)置導(dǎo)航條文字樣式畏梆。安卓上如果要設(shè)置文字居中椎扬，只要添加alignSelf:'center'就可以了
// headerBackTitleStyle：設(shè)置導(dǎo)航條返回文字樣式。
// headerTintColor：設(shè)置導(dǎo)航欄文字顏色具温〔系樱總感覺和上面重疊了。
// headerPressColorAndroid：安卓獨(dú)有的設(shè)置顏色紋理铣猩，需要安卓版本大于5.0
// gesturesEnabled：是否支持滑動(dòng)返回手勢揖铜，iOS默認(rèn)支持，安卓默認(rèn)關(guān)閉
static navigationOptions = {
headerTitle: 'ViewTow'
}
render() {
return (
<Button
onPress={() => {
this.props.navigation.navigate('Three')
}}
title='點(diǎn)擊進(jìn)入ViewThree'
/>
)
}
}
export default ViewTow;
ViewThree.js
import React, {Component} from 'react';
import {
Button
} from 'react-native'
class ViewThree extends Component{
static navigationOptions = {
headerTitle:'ViewThree'
}
render(){
return (<Button title='ViewThree'/>)
}
}
export default ViewThree;
上面幾個(gè)文件運(yùn)行效果如下
這里寫圖片描述
如果你想第一個(gè)頁面打開第二個(gè)頁面达皿，或者打開多個(gè)頁面后 關(guān)閉其他頁面 只保留打開的頁面
也就是打開一個(gè)頁面天吓，關(guān)閉當(dāng)前頁面
我下面吧ViewTow.js文件中的render代碼改一下
render() {
return (
<Button
onPress={() => {
//重構(gòu)路由頁面
let resetActiom = NavigationActions.reset({
index: 0,//默認(rèn)打開actions中的第幾個(gè)頁面
actions: [//actions是頁面集合
//NavigationActions.navigate({ routeName: 'One' }),
//NavigationActions.navigate({ routeName: 'Tow' }),
NavigationActions.navigate({ routeName: 'Three' })//這里有幾個(gè)就保留幾個(gè)，點(diǎn)擊完成后就會(huì)重構(gòu)導(dǎo)航器
]
})
this.props.navigation.dispatch(resetActiom)
}}
title='點(diǎn)擊進(jìn)入ViewThree'
/>
)
}
我在重構(gòu)路由后只保留一個(gè)界面峦椰，運(yùn)行效果如下
這里寫圖片描述
你會(huì)發(fā)現(xiàn)點(diǎn)擊進(jìn)入第三個(gè)界面后 返回箭頭消失了龄寞，無法返回第一和第二個(gè)界面了
