react navigation方法如何使用

本篇內容介紹了“react navigation方法如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

react navigation會在所有注冊路由頁面的props里面注入navigation，其使用方法：1、通過“const Main = createStackNavigator({...})”方式創建主路由；2、通過“createBottomTabNavigator”創建底部標簽欄；3、通過“createSwitchNavigator”創建特殊switch路由等。

react-navigation 常用方法

react-navigation是rn項目使用路由管理器；除了提供路由history管理，還有導航器的ui組件！

react-navigation會在所有注冊路由頁面的props里面注入navigation!!!

1.創建主路由；

createStackNavigator

其中包括項目中所使用的基本所有的頁面路由；

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :'Tab',   
})

2.創建底部標簽欄；

createBottomTabNavigator

即app首頁底部的幾個tab分頁

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:'最熱',
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:'#404040'}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :'Home',
    tabBarOptions:{
        activeTintColor:'#1d85d0' 
    }
})

3.創建特殊switch路由； 跳轉之前的頁面將不會進入history堆棧；

createSwitchNavigator
//歡迎頁跳轉不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :'Init'
})

4.創建頂部tab頁標簽，會占用導航欄位置

createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:'tab1',
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}

5.navigationOptions常用的配置屬性

headerTtile: 頁面標題

headerTitleStyle： 標題文字的樣式

headerStyle:標題整塊的樣式

6.tab部分的參考屬性

tabBarOptions - 具有以下屬性的對象:
activeTintColor -活動選項卡的標簽和圖標顏色。
activeBackgroundColor -活動選項卡的背景色。
inactiveTintColor -"非活動" 選項卡的標簽和圖標顏色。
inactiveBackgroundColor -非活動選項卡的背景色。
showLabel -是否顯示選項卡的標簽, 默認值為 true。
showIcon - 是否顯示 Tab 的圖標，默認為false。
style -選項卡欄的樣式對象。
labelStyle -選項卡標簽的樣式對象。
tabStyle -選項卡的樣式對象。
allowFontScaling -無論標簽字體是否應縮放以尊重文字大小可訪問性設置，默認值都是 true。
safeAreaInset - 為 <SafeAreaView> 組件重寫 forceInset prop， 默認值：{ bottom: 'always', top: 'never' }； top | bottom | left | right 的可選值有： 'always' | 'never'。

BottomTabBar組件也可以草考這個屬性

7.制作返回功能

通常我們在需要返回的頁面上使用 this.props.navigation 獲取到navigation 的props對象；

可以使用

this.props.navigation.goBack()

來返回頁面；但是這樣做的前提是 this.props.navgation必須是當前頁面的navigation;即可以查看 this.props.navigation.state.routeName 來判斷：

某些特殊的情況下，比如安卓返回鍵的返回判斷有可能返回事件不是在該頁面捕獲，因為回退事件BackHandler是會向上傳遞的； 那么this.props.navigation可能就不是需要回退的壓面的navigation對象了；所以已使用go.Back()是不會成功的；或者有些情況下naviagtion對象不一定有goBack()方法 也會造成這個問題；

例如;

home頁面是一級路由，detail頁面是二級路由，兩個頁面都設置了BackHandler的回調函數；若detai里面的BackHandler沒有被當前頁面捕獲的話就會傳遞給home里面的BackHandler回調函數；那么在home里的 this.props.navigation就是指的home頁面的，而不是detail，所以調用goBack也不會成功！！！

解決方法：

使用NavigationActions ；

所有NavigationActions返回可以使用navigation.dispatch()方法發送到路由器的對象。

支持以下操作：

Navigate - 導航到另一條路由

Back - 回到之前的狀態

Set Params - 設置給定路由的參數

Init - 用于在狀態未定義時初始化第一個狀態

通過：

dispatch(NavigationActions.back());

就可以實行返回操作了

注意：dispatch()方法是在 this.props.navigation里面的。

“react navigation方法如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！