react navigation方法怎麼用

react navigation會在所有註冊路由頁面的props裡面注入navigation，其使用方法：1、透過「const Main = createStackNavigator({...})」方式建立主路由；2、透過「createBottomTabNavigator 」建立底部標籤欄；3、透過「createSwitchNavigator」建立特殊switch路由等。

本教學操作環境：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:&#39;#404040&#39;}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :&#39;Home&#39;,
    tabBarOptions:{
        activeTintColor:&#39;#1d85d0&#39; 
    }
})

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: &#39;always&#39;, top: &#39;never&#39; }； top | bottom | left | right 的可选值有： &#39;always&#39; | &#39;never&#39;。

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中文網其他相關文章！