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: 提供從屏幕左側滑入的抽屜

 

未完待續......