React Navigation 导航栏样式调整+底部角标消息提示

栏目: IOS · Android · 发布时间: 5年前

内容简介:五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬!这是坚持学习网上关于

五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬!

这是坚持学习 react-native 的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是 react-navigation ,也是rn社区主推的一个导航库。

网上关于 react-navigation 的基本使用也是一抓一大把,这里对于它的使用不做过多介绍,主要记录使用过程中的其他问题。

因为android 和iOS 手机的不同,导航栏的显示也不太一样,而这篇文章会尽量的配置属性,让两端的导航栏样式、页面跳转的动画保持一致,同时还会介绍底部导航栏添加角标的方法。

这里使用的是 3.9.1版本 ,网上好多文章是2.x版本的,用法基本大同小异。

android 导航栏标题居中适配

默认情况下,iOS的标题居中显示,而android的则不!!!

React Navigation 导航栏样式调整+底部角标消息提示

解决: createStackNavigatordefaultNavigationOptions 属性里配置 textAlignflex

const AppStackNavigator = createStackNavigator({
    HomeScreen: {screen: HomeScreen},
    RainScreen: {screen: RainScreen}
},{
    defaultNavigationOptions:{
        ...
        headerTitleStyle: { 
            ...
            textAlign: "center", //用于android 机型标题居中显示
            flex:1
        }
    }
})

注:android机型标题默认不居中, textAlignflex 的属性配置用于android机型标题居中显示。

在这种情况下,如果配置了 headerLeft 或者 headerRight 属性,会出现标题偏移的现象。

React Navigation 导航栏样式调整+底部角标消息提示

直接在 defaultNavigationOptions 里配置空view的 headerLeftheaderRight

defaultNavigationOptions:{
        ...
        headerTitleStyle: {
            ...
            textAlign: "center", //用于android 机型标题居中显示
            flex:1,
        },
        headerRight: <View/>,
        headerLeft: <View/>
    }

这时候标题居中,同时可以在各自的页面里面去重写 headerLeft 的样式。

android 导航栏去除阴影样式

android的导航栏还有阴影的样式,添加 elevation 设置阴影的偏移量

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

React Navigation 导航栏样式调整+底部角标消息提示

至此的导航栏的效果跟iOS基本保持一致。

android 页面跳转动画,自右向左打开

默认的android页面跳转是自下而上打开页面,而要与iOS的保持一致的自右向左,配置 transitionConfig 属性。

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

底部导航添加消息角标

有时候我们会遇到这样的需求,在底部导航处添加消息的角标,提醒用户阅读的。

React Navigation 导航栏样式调整+底部角标消息提示

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/

更多精彩欢迎关注微信号:春风十里不如认识你

一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!

React Navigation 导航栏样式调整+底部角标消息提示


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Data Structures and Algorithm Analysis in Java

Data Structures and Algorithm Analysis in Java

Mark A. Weiss / Pearson / 2006-3-3 / USD 143.00

As the speed and power of computers increases, so does the need for effective programming and algorithm analysis. By approaching these skills in tandem, Mark Allen Weiss teaches readers to develop wel......一起来看看 《Data Structures and Algorithm Analysis in Java》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换