官方文檔鏈接 https://reactnavigation.org/docs/navigation-prop.html<br />this.props.navigation新增4個(gè)Action：
- Push 與navigate類(lèi)似按灶，向前跳轉(zhuǎn)
navigation.push(routeName, params, action)<br /> - Pop 棧里彈出一個(gè)頁(yè)面帅刀，回到上級(jí)，參數(shù)n表示向上彈出多少個(gè)頁(yè)面<br />
navigation.pop(n)<br /> - PopToTop 返回第一個(gè)頁(yè)面的诵，關(guān)閉其他所有<br />
navigation.popToTop()<br /> - Replace 將當(dāng)前頁(yè)面換成其他頁(yè)面<br />
navigation.replace(routeName, params, action)<br />
新增addListener 監(jiān)聽(tīng)頁(yè)面生命周期：<br />1.willBlur 即將失去焦點(diǎn)<br />2.willFocus 即將獲得焦點(diǎn)<br />3.didFocus 獲得焦點(diǎn)<br />4.didBlur 失去焦點(diǎn)<br />did的兩個(gè)狀態(tài)會(huì)在頁(yè)面切換結(jié)束后發(fā)生
const didBlurSubscription = this.props.navigation.addListener(
'didBlur', //失去焦點(diǎn)后打印信息
payload => {
console.debug('didBlur', payload);
}
);
// 在完成后取消監(jiān)聽(tīng)事件
didBlurSubscription.remove();
isFocused 判斷當(dāng)前頁(yè)面是否獲得焦點(diǎn)
let isFocused = this.props.navigation.isFocused(); //true獲取false未獲取
state 返回當(dāng)前navigation的狀態(tài)，自定義Action里需要的key可以在這里獲取
{
// 頁(yè)面名稱(chēng)
routeName: 'profile',
// 頁(yè)面的key值
key: 'main0',
// 參數(shù)
params: { hello: 'world' }
}
setParams,getParm 設(shè)置/獲取navigation的參數(shù)params<br />非頁(yè)面（如自定義組件）現(xiàn)在提供了獲取導(dǎo)航器的方法 withNavigation
import React from 'react';
import { Button } 'react-native';
import { withNavigation } from 'react-navigation';
class MyBackButton extends React.Component {
render() {
return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
}
}
// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton); //調(diào)用withNavigation(Component)后诬垂，可以使用this.props.navigation獲取導(dǎo)航器稚机，此方法返回Component
withNavigationFocus除了為非頁(yè)面組件提供navigation，還提供了isFocused屬性判斷組件是否獲取焦點(diǎn)
import React from 'react';
import { Text } 'react-native';
import { withNavigationFocus } from 'react-navigation';
class FocusStateLabel extends React.Component {
render() {
return <Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>;
}
}
// withNavigationFocus returns a component that wraps FocusStateLabel and passes
// in the navigation prop
export default withNavigationFocus(FocusStateLabel);
