React Navigation 導航欄樣式調整+底部角标消息提示

五一佳節匆匆而過，有人選擇在外面看人山人海，有人選擇宅在家中度過五一，也有人依然堅守在第一線，緻敬！

這是堅持學習

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/