五一佳節匆匆而過，有人選擇在外面看人山人海，有人選擇宅在家中度過五一，也有人依然堅守在第一線，致敬！
這是堅持學習react-native的第二篇文章，可能會遲到，但是絕不會缺席，這篇要涉及到的是react-navigation，也是rn社區主推的一個導航庫。

網上關于react-navigation的基本使用也是一抓一大把，這里對于它的使用不做過多介紹，主要記錄使用過程中的其他問題。

因為android 和iOS 手機的不同，導航欄的顯示也不太一樣，而這篇文章會盡量的配置屬性，讓兩端的導航欄樣式、頁面跳轉的動畫保持一致，同時還會介紹底部導航欄添加角標的方法。

這里使用的是3.9.1版本，網上好多文章是2.x版本的，用法基本大同小異。

android 導航欄標題居中適配

默認情況下，iOS的標題居中顯示，而android的則不！！！

解決：createStackNavigator的defaultNavigationOptions屬性里配置textAlign和flex

const AppStackNavigator = createStackNavigator({HomeScreen: {screen: HomeScreen},RainScreen: {screen: RainScreen} },{defaultNavigationOptions:{...headerTitleStyle: { ...textAlign: "center", //用于android 機型標題居中顯示flex:1}} })

注：android機型標題默認不居中，textAlign和flex的屬性配置用于android機型標題居中顯示。
在這種情況下，如果配置了headerLeft或者headerRight 屬性，會出現標題偏移的現象。

直接在defaultNavigationOptions里配置空view的headerLeft和headerRight

defaultNavigationOptions:{...headerTitleStyle: {...textAlign: "center", //用于android 機型標題居中顯示flex:1,},headerRight: <View/>,headerLeft: <View/>}

這時候標題居中，同時可以在各自的頁面里面去重寫headerLeft的樣式。

android 導航欄去除陰影樣式

android的導航欄還有陰影的樣式，添加elevation 設置陰影的偏移量

defaultNavigationOptions:{headerStyle:{backgroundColor:"#fff",elevation:0.5},... }

至此的導航欄的效果跟iOS基本保持一致。

android 頁面跳轉動畫，自右向左打開

默認的android頁面跳轉是自下而上打開頁面，而要與iOS的保持一致的自右向左，配置transitionConfig屬性。

const AppStackNavigator = createStackNavigator({HomeScreen: {screen: HomeScreen},... },{defaultNavigationOptions:{...},transitionConfig: () => ({screenInterpolator: (sceneProps) => {return StackViewStyleInterpolator.forHorizontal(sceneProps)},}), })

底部導航添加消息角標

有時候我們會遇到這樣的需求，在底部導航處添加消息的角標，提醒用戶閱讀的。

在tabBarIcon的屬性里直接添加圖標顯示的，這里的msg變量數值是全局的，只做演示使用，實際項目里可以根據接口返回數據，可以搭配mobx 一起使用。

const rootTab = createBottomTabNavigator({...info: {screen: InfoStack,navigationOptions: {tabBarLabel: "消息",tabBarIcon: ({focused, tintColor}) => {let icon = focused ?require('../resources/img/mine_icon_message_selected.png') :require('../resources/img/mine_icon_message_default.png');return <View>{msg > 0 ?<View style={{width:12,height:12,justifyContent:"center",position: 'absolute',zIndex: 9,backgroundColor: "#FB3768",borderRadius:6,right:0,top:-2,}}><Text style={[{fontSize:10, color:"#fff", textAlign:"center",}]}>{msg}</Text></View> : null}<Image source={icon} style={{width: 34, height: 26}}/></View>}}} },{...defaultNavigationOptions: ({navigation, screenProps}) => ({tabBarOnPress: (obj) => {//點擊的時候清除消息const {routeName} = obj.navigation.state;if (routeName === "info") {msg = 0}obj.navigation.navigate(obj.navigation.state.key)}}) })

以上幾點是在react-navigation的使用過程中遇到的問題以及解決方法，相關代碼已經傳到了github上https://github.com/taixiang/reactNativeDemo，僅供參考，如果有更好的方式 歡迎一起學習研究。

歡迎關注我的個人博客：https://www.manjiexiang.cn/

更多精彩歡迎關注微信號：春風十里不如認識你
一起學習，一起進步，歡迎上車，有問題隨時聯系，一起解決！！！

轉載于:https://www.cnblogs.com/taixiang/p/10822342.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的React Navigation 导航栏样式调整+底部角标消息提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。