react-navigation開發(fā)指南
推薦使用
creatMaterialTopTabNavigator頂部材料設計主題標簽欄
和
createBottomTabNavigator相當于iOS的TabBarController,屏幕下方標簽欄俄烁。
navigation包含的功能屬性：
navigate: 跳轉到其他界面
state：屏幕當前state
setParamas: 改變路由的params
goBack：關閉當前屏幕
dispatch:向路由發(fā)送一個action
addListener： 訂閱導航生命周期的更新
isFocused:true 標識屏幕獲取了焦點
getParams: 獲取具有回退的特定參數(shù)
dangerouslyGetParent: 返回父導航器哭靖；
注意：一個navigation有可能沒有navigate、setParams以及goBack,只有state與dispatch,所以在使用navigate時要進行判斷，如果沒有navigate可以使用navigation去dispatch一個新的action钞诡。
如：
const { navigation,theme,selectedTab}=this.props;
const resetAction = StackActions.reset({
index: 0,
actions:[
NavigationActions.navigate({
routeName: 'HomePage',
params:{
theme:theme,
selectedTab: selectedTab
},
})
]
})
navigation.dispatch(resetAction)
注意：reset這個API在2.0以后的版本中被從NavigationActions中移到了StackActions中，如以上代碼擂涛，使用是要注意
StackNavigator的額外功能：
當且僅當當前navigator是stack navigator時丢氢，this.props.navigation上有一些附加功能，這些函數(shù)是navigate和goBack的代替方法裕寨，你可以使用任何你喜歡的方法浩蓉，功能如下：
this.props.navigation
push 導航到堆棧中的一個新路由
pop 返回堆棧中的上一個頁面
popToTop 跳轉到堆棧中的最頂層頁面
replace 用新路由替換當前路由
reset 擦除導航器狀態(tài)并將其替換多個操作的結果
dismiss 關閉當前棧
使用navigate進行頁面間的跳轉
navigation.navigate({routeName, params, action, key})
或
navigation.navagate(routeName, params, action)
//routeName: 要跳轉頁面的路由名派继，也就是我們在導航配置里面配置的路由名
//params: 傳遞給下一個界面的參數(shù)；
//action: 如果改界面是一個navigation的話捻艳，將運行這個sub-action
//key: 要導航到路由的可選標識符驾窟。如果已經(jīng)存在，將后退到此路由
可以通過this.props.state.params來獲取通過setParams(),或navigation.navigate()傳遞的參數(shù)
<Button
title={params.mode === 'edit' ? '保存':'編輯'}
onPress={()=>
setParams({mode: params.mode === 'edit' ? '' :'edit'})}
/>
<Button
title="Go to Page1"
onPress={()=>{
navigation.navigate('page',{name:'Devio'});
}}
/>
const {navigation} = this.prop;
const {state, setParams} = navigation;
const {params} = state;
const showText = params.mode === 'edit' ? '正在編輯':'完成編輯';
使用setParams改變route params
setParams: function setParams(params): 我們可以借助setParams來改變route params 认轨，例如通過setParams來更新頂部標題绅络，返回按鈕等；
class ProfileScreen extends React.Component {
render(){
const {setParams} = this.props.navigation;
return (
<Button
onPress={() => setParams({name: 'Lucy'})}
title="Set title name to 'Lucy'"
/>
)
}
}
注意：navigation.setParams改變的是當前頁面的Params,如果要改變其他頁面的params可以通過NavigationActions.setParams完成嘁字，下文會講到恩急。
使用goBack返回上一頁或者指定頁面
goBack: function goBack(key): 我們可以借助goBack返回到上一頁或者路由棧指定頁面。
- 其中
key表示你要返回頁面的頁面標識如id-151704349482934754-4,不是routeName拳锚。 - 可以通過指定頁面的
navigation.state.key來獲得頁面的標識 - key 非必傳假栓，也可以穿null
navigation..state {params: {...}, key: "id-154839473957543975-4", routeName: "Page1"}
<Button
title="Set title name to 'Lucy'"
onPress={() => {
navigation.goBack();
}}
/>
通過dispatch發(fā)送一個action
-
dispatch: function dispatch(action): 給當前頁面設置action，會替換原來的跳轉霍掺，回退等事件匾荆。
const resetAction = StackActions.reset({
index: 0,
actions:[
NavigationActions.navigate({
routeName: 'HomePage',
params:{
theme:theme,
selectedTab: selectedTab
},
})
]
})
navigation.dispatch(resetAction)
NavigationActions
- Navigate: 導航到其他頁面
- Back : 返回到上一個頁面
- Set params : 設置指定頁面的Params;
- Init : 初始化一個state 如果state是undefined
Navigate
方法原型： navigate({routeName, params,actions,key})
- routeName: 字符串， 必選 杆烁，在app的router里注冊的導航目的地的routeName
- params: 對象牙丽， 可選項，融合進目的地route的參數(shù)
- action： 對象兔魂， 可選項（高級）烤芦，如果screen也是一個navigator，次級action可以在router中運行析校。在文檔中描述的任何actions都可以作為次級action构罗。
- key: string或null, 可選，要導航到的路由標識符智玻，如果已經(jīng)存在遂唧，則導航回此路由豁延。
import {NavigationActions} from 'react-navigation';
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({routeName: 'SubProfileRoute'})
})
Back
返回到前一個screen并且關閉當前screen.backaction creator接受一個可選的參數(shù)：
方法原型： back(key)
import {NavigationActions} from 'react-navigation';
const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction)
SetParams
通過SetParams我們可以修改指定頁面的Params
- params: 對象摔握， 必選參數(shù)，將會被合并到已經(jīng)存在頁面的Params中
- key : 字符串 蚀乔， 頁面key值
import {NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
params: {title: 'HomePage'},
key: 'id-1547347857384537-4',
})
navigation中有setParams页滚，為什么還要有navigationActions.setParams呢召边？
- 1.上文講到過有時navigation中只有state與dispatch,這個時候如果要修改頁面的Params,則只能通過
NavigationActions.setParams了。 - 2.另外裹驰，navigation.setParams只能修改當前頁面的Params, 而
NavigationActions.setParams可以修改所有頁面的Params隧熙；
StackActions
- Reset: 重置當前state到一個新的state；
- Replace: 使用另一條路由替換指定路由邦马；
- Push： 在堆棧頂部添加一個頁面贱鼻，然后跳轉到該頁面
- Pop: 跳轉到上一個頁面宴卖；
- PopToTop: 跳轉到堆棧最頂層頁面滋将；
Reset:
Reset action 刪掉所有的navigation state 并且使用這個action的結果來代替邻悬。
- index, 數(shù)組，必選随闽，navigation state中route數(shù)組中激活的route的index父丰。
- actions, 數(shù)組，必選掘宪，Navigation Actions數(shù)組蛾扇，將會代替navigation state。
- key: string or null ,可選如果設置具有導航key的導航器將重置魏滚。如果為null,根導航器將重置镀首。
import {NavigationActions, StateActions } from 'react-navigation'
const resetAction = StateActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName: 'Profile'})
]
})
this.props.navigation.dispatch(resetAction)
//應用場景，進入APP后歡迎頁不再使用鼠次，這時可以用NavigationActions.reset重置它更哄。
Replace:
Replace 用另一個路由替換指定路由
- key string ,被替換路由的key,如果未指定，最近的路由將會替換
- newKey string,用于替換路線的key腥寇，如果未提供則自動生成
- routeName string,routeName用于替換路由
- params object,要傳入替換路由的參數(shù)
- action object,可選的子動作
*immediate boolean成翩，目前沒有效果，這是stack navigator支持動畫替換（它目前不支持）
Push
Push 在堆棧頂部添加一條路由赦役，并導航至該路由麻敌。
push與navigate的區(qū)別在于，如果有已經(jīng)加載的頁面掂摔， navigate方法將跳轉到已經(jīng)加載的頁面术羔，而不會重新創(chuàng)建一個新的。push總是可以創(chuàng)建新的頁面乙漓，所以一個頁面可以多次創(chuàng)建级历。
- routeName string，routeName用于替換路由簇秒。
- params object, 將合并到目標路由的參數(shù)鱼喉。
- action object,可選，（高級）如果頁面時navigator趋观，則在子路由器中運行子操作扛禽。
import { StackActions } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Profile',
params:{
myUserId: 9,
},
})
this.props.navigation.dispatch(pushAction);
pop
The pop 一個可以返回堆棧中上一個路由的方法，通過設置參數(shù)n,可以指定返回多少層皱坛。
- n number, 返回的層數(shù)编曼，1是上一層 ，2是上一層的上一層
import { StackActions } from 'react-navigation';
const popAction = StackActions.pop({
n: 1,
})
this.props.navigation.dispatch(popAction);
popToTop
The popToPop一個可以直接跳到堆棧最頂端剩辟，并銷毀其他所有頁面的方法掐场，它在功能上與StackAction.pop({n: currentIndex})相同往扔。
import { StateAction } from 'react-navigation';
this.props.navigation.dispatch(StateAction.popToTop());
