快捷導(dǎo)航

Android開發(fā)之React Navigation 導(dǎo)航欄樣式調(diào)整+底部角標(biāo)消息提示

更新時(shí)間：2019年05月07日 11:07:13 作者：程序猿tx

這篇文章主要介紹了React Navigation 導(dǎo)航欄樣式調(diào)整+底部角標(biāo)消息提示的相關(guān)知識，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

五一佳節(jié)匆匆而過，有人選擇在外面看人山人海，有人選擇宅在家中度過五一，也有人依然堅(jiān)守在第一線，致敬！
這是堅(jiān)持學(xué)習(xí)react-native的第二篇文章，可能會(huì)遲到，但是絕不會(huì)缺席，這篇要涉及到的是react-navigation，也是rn社區(qū)主推的一個(gè)導(dǎo)航庫。

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

因?yàn)閍ndroid 和iOS 手機(jī)的不同，導(dǎo)航欄的顯示也不太一樣，而這篇文章會(huì)盡量的配置屬性，讓兩端的導(dǎo)航欄樣式、頁面跳轉(zhuǎn)的動(dòng)畫保持一致，同時(shí)還會(huì)介紹底部導(dǎo)航欄添加角標(biāo)的方法。

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

android 導(dǎo)航欄標(biāo)題居中適配

默認(rèn)情況下，iOS的標(biāo)題居中顯示，而android的則不?。。?/p>

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

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

注：android機(jī)型標(biāo)題默認(rèn)不居中，textAlign和flex的屬性配置用于android機(jī)型標(biāo)題居中顯示。

在這種情況下，如果配置了headerLeft或者headerRight 屬性，會(huì)出現(xiàn)標(biāo)題偏移的現(xiàn)象。

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

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

這時(shí)候標(biāo)題居中，同時(shí)可以在各自的頁面里面去重寫headerLeft的樣式。

android 導(dǎo)航欄去除陰影樣式

android的導(dǎo)航欄還有陰影的樣式，添加elevation 設(shè)置陰影的偏移量

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

至此的導(dǎo)航欄的效果跟iOS基本保持一致。

android 頁面跳轉(zhuǎn)動(dòng)畫，自右向左打開

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

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

底部導(dǎo)航添加消息角標(biāo)

有時(shí)候我們會(huì)遇到這樣的需求，在底部導(dǎo)航處添加消息的角標(biāo)，提醒用戶閱讀的。

在tabBarIcon的屬性里直接添加圖標(biāo)顯示的，這里的msg變量數(shù)值是全局的，只做演示使用，實(shí)際項(xiàng)目里可以根據(jù)接口返回?cái)?shù)據(jù)，可以搭配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) => {
   //點(diǎn)擊的時(shí)候清除消息
   const {routeName} = obj.navigation.state;
   if (routeName === "info") {
    msg = 0
   }
   obj.navigation.navigate(obj.navigation.state.key)
  }
 })
})

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

總結(jié)

以上所述是小編給大家介紹的React Navigation 導(dǎo)航欄樣式調(diào)整+底部角標(biāo)消息提示 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: