官方文檔地址
React native 導航使用
- 安裝:
yarn add react-navigation
StackNavigator 的使用
StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs 導航的路徑霍殴,名稱等
const App = StackNavigator({ Main: {screen: MainScreen}, });
StackNavigatorConfig 導航的配置項
- ****一大堆(建議看官方文檔)
- navigationOptions 一些配置選項(如果在初始化的時候使用鹊奖,會覆蓋你在組件里面單獨的設置)
- title 標題名稱
- header 可以單獨設置 returns a React Element
- headerTitle 標題名稱
- headerTitleAllowFontScaling 標題字體是否可以縮放澄峰,默認為 true
- headerBackTitle 返回按鈕旁邊的文字
- headerTruncatedBackTitle
- headerRight header右邊的一個 Element
- headerLeft header左邊的一個 Element
- headerStyle header的style 比如 headerStyle: { backgroundColor:'#fff' }
- headerTitleStyle 標題的 style
- headerBackTitleStyle 返回標題文字,注意是文字的style
- headerTintColor header圖標的顏色
- headerPressColorAndroid Android>5.0 點擊時波紋的顏色
- gesturesEnabled 是否可以用手勢打開這個屏幕 IOS (true) Android (flase)
- gestureResponseDistance 從屏幕邊緣覆蓋的觸摸距離 horizontal (默認 25) vertical (默認135)
還有tab導航跟抽屜導航葬毫,建議看文檔
導航的一些事件
- navigate - 簡單理解就是跳轉(zhuǎn)到另外一個導航頁面
- state - 導航的state
- setParams - 傳遞參數(shù)
- goBack - 關閉當前頁面,導航回退
- dispatch - 發(fā)起一個 dispatch
導航的一些 action
- Navigation Actions
Navigate - 導航到另外一個
Reset - 把state狀態(tài)替換(可以理解為重置router)
Back - 回退
Set Params - 參數(shù)
Init - 設置初始化(除非你沒設置,或者undefined的時候)