本教程操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
react navigation方法怎么用？
(相關資料圖)
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頁標簽，會占用導航欄位置
createMaterialTopTabNavigatorexport 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 - 用于在狀態未定義時初始化第一個狀態
具體看文檔：https://reactnavigation.org/docs/zh-Hans/navigation-actions.html
通過：
dispatch(NavigationActions.back());
就可以實行返回操作了；
注意：
dispatch()方法是在 this.props.navigation里面的
推薦學習：《react視頻教程》
以上就是react navigation方法怎么用的詳細內容，更多請關注php中文網其它相關文章！
關鍵詞： navigation React
營業執照公示信息