react-navigation學習筆記

1.關於this.props.navigation.navigate()與this.props.navigation.push()的區別

navigate方法在跳轉時會在已有的路由堆棧中查找是否已經存在該值，若存在將直接跳轉到以前存在的地址。而且只有當路由堆棧中不存在這個新路由時纔會添加。此狀況下使用this.props.navigation.popToTop()方法沒法生效。 push方法則老是向路由堆棧中添加，不管以前是否存在。此時使用this.props.navigation.popToTop()方法能夠達到回到棧頂路由的位置。

2.路由傳參

this.props.navigation.push('路由名稱',{ '參數名': '值',[ 其餘參數]})

3.獲取參數

this.props.navigation.getParam('參數名',[默認值])

 

4.使用setParams更新已經掛在的活動窗口的導航選項

 

this.props.navigation.setParams({otherParam: 'Updated!'})

 

5.能夠從任何組件訪問到navigation，獲取路由相關信息

import { withNavigation } from 'react-navigation';
// 而後將須要訪問路由的組件用該方法包裹，如

withNavigation(‘組件名’)

6.替換路由

this.props.navigation.replace();

7.定義動態路由

const SimpleApp = createStackNavigator({ Home: { screen: HomeScreen }, Chat: { screen: ChatScreen, path: 'chat/:user', //傳參數的規則 }, });

8.URI前綴

const SimpleApp = createStackNavigator({...}); const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; const MainApp = () => <SimpleApp uriPrefix={prefix} />;

9.核心方法

createStackNavigator: 一次渲染一個屏幕並提供屏幕之間的轉換。打開新屏幕時，它將放置在堆棧頂部

createBottomTabNavigator: 呈現一個標籤欄，容許用戶在多個屏幕之間切換

createSwitchNavigator: 在一個屏幕和另外一個屏幕之間切換，頂部沒有UI，當它們變爲非活動狀態時卸載屏幕

createDrawerNavigator: 提供從屏幕左側滑入的抽屜

 

未完待續......