本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

react navigation方法怎么用？

(相關(guān)資料圖)

react-navigation 常用方法

react-navigation是rn項(xiàng)目使用路由管理器；除了提供路由history管理，還有導(dǎo)航器的ui組件??；

react-navigation會(huì)在所有注冊(cè)路由頁(yè)面的props里面注入navigation!!!

1.創(chuàng)建主路由；

createStackNavigator

其中包括項(xiàng)目中所使用的基本所有的頁(yè)面路由；

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

2.創(chuàng)建底部標(biāo)簽欄；

createBottomTabNavigator

即app首頁(yè)底部的幾個(gè)tab分頁(yè)

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.創(chuàng)建特殊switch路由； 跳轉(zhuǎn)之前的頁(yè)面將不會(huì)進(jìn)入history堆棧；

createSwitchNavigator//歡迎頁(yè)跳轉(zhuǎn)不可返回const Navigation = createSwitchNavigator({    Init:Init,    Main:Main},{    initialRouteName :"Init"})

4.創(chuàng)建頂部tab頁(yè)標(biāo)簽，會(huì)占用導(dǎo)航欄位置

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

5.navigationOptions常用的配置屬性

headerTtile: 頁(yè)面標(biāo)題

headerTitleStyle： 標(biāo)題文字的樣式

headerStyle:標(biāo)題整塊的樣式

6.tab部分的參考屬性

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

BottomTabBar組件也可以草考這個(gè)屬性

7.制作返回功能

通常我們?cè)谛枰祷氐捻?yè)面上使用 this.props.navigation 獲取到navigation 的props對(duì)象；

可以使用

this.props.navigation.goBack()

來(lái)返回頁(yè)面；但是這樣做的前提是 this.props.navgation必須是當(dāng)前頁(yè)面的navigation;即可以查看 this.props.navigation.state.routeName 來(lái)判斷：

某些特殊的情況下，比如安卓返回鍵的返回判斷有可能返回事件不是在該頁(yè)面捕獲，因?yàn)榛赝耸录﨎ackHandler是會(huì)向上傳遞的； 那么this.props.navigation可能就不是需要回退的壓面的navigation對(duì)象了；所以已使用go.Back()是不會(huì)成功的；或者有些情況下naviagtion對(duì)象不一定有g(shù)oBack()方法 也會(huì)造成這個(gè)問(wèn)題；

例如;

home頁(yè)面是一級(jí)路由，detail頁(yè)面是二級(jí)路由，兩個(gè)頁(yè)面都設(shè)置了BackHandler的回調(diào)函數(shù)；若detai里面的BackHandler沒(méi)有被當(dāng)前頁(yè)面捕獲的話就會(huì)傳遞給home里面的BackHandler回調(diào)函數(shù)；那么在home里的 this.props.navigation就是指的home頁(yè)面的，而不是detail，所以調(diào)用goBack也不會(huì)成功！?。?/p>

解決方法：

使用NavigationActions ；

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

支持以下操作：

Navigate - 導(dǎo)航到另一條路由

Back - 回到之前的狀態(tài)

Set Params - 設(shè)置給定路由的參數(shù)

Init - 用于在狀態(tài)未定義時(shí)初始化第一個(gè)狀態(tài)

具體看文檔：https://reactnavigation.org/docs/zh-Hans/navigation-actions.html

通過(guò)：

dispatch(NavigationActions.back());

就可以實(shí)行返回操作了；

注意：

dispatch()方法是在 this.props.navigation里面的

推薦學(xué)習(xí)：《react視頻教程》

以上就是react navigation方法怎么用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： navigation React