React Navigation 1.5.4新API介紹

官方文檔鏈接 https://reactnavigation.org/docs/navigation-prop.html<br />this.props.navigation新增4個(gè)Action:

  1. Push 與navigate類似,向前跳轉(zhuǎn) navigation.push(routeName, params, action)<br />
  2. Pop 棧里彈出一個(gè)頁面,回到上級(jí),參數(shù)n表示向上彈出多少個(gè)頁面<br />navigation.pop(n)<br />
  3. PopToTop 返回第一個(gè)頁面,關(guān)閉其他所有<br />navigation.popToTop()<br />
  4. Replace 將當(dāng)前頁面換成其他頁面<br />navigation.replace(routeName, params, action)<br />

新增addListener 監(jiān)聽頁面生命周期:<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ì)在頁面切換結(jié)束后發(fā)生

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',     //失去焦點(diǎn)后打印信息
  payload => {
    console.debug('didBlur', payload);
  }
);
// 在完成后取消監(jiān)聽事件
didBlurSubscription.remove();

isFocused 判斷當(dāng)前頁面是否獲得焦點(diǎn)

let isFocused = this.props.navigation.isFocused(); //true獲取false未獲取

state 返回當(dāng)前navigation的狀態(tài),自定義Action里需要的key可以在這里獲取

{
  // 頁面名稱
  routeName: 'profile',
  // 頁面的key值
  key: 'main0',
  // 參數(shù)
  params: { hello: 'world' }
}

setParams,getParm 設(shè)置/獲取navigation的參數(shù)params<br />非頁面(如自定義組件)現(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除了為非頁面組件提供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);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容