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/
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Flutter 43: 图解 Flutter 适配 AndroidX
小菜在尝试一些三方库时,会提示与 androidx 不兼容,小菜整理一下尝试步骤; 首先需要了解一下 Android 的基本情况,目前已经由 V7 发展到 androidx,主要避免包越来越臃肿的问题,而 Android 的新特性也会在 androidx 中进行优化增加;与之而来的挑战是适配问题,support 包与 androidx 不兼容,二者存一,在项目中需要好好斟酌; 小菜未适配 androidx 时引入三方库时会提示如下问题;此时用谷歌亲儿子工具 AndroidStudio 可以方便很多; 适配步骤 1. 更新至最新的 distributionUrl 文件路径:android/gradle/wrapper/gradle-wrapper.properties 2. 更新 build.gradle 中 classpath 与 Kotlin 版本 文件路径:classpath,此时注意 Kotlin 版本升至 1.3.0 及以上; 3. 添加 androidx 配置 文件路径:android/gradle.properties android.useAndroidX=true 代表...
- 下一篇
阿里开源!轻量级深度学习端侧推理引擎 MNN
阿里妹导读:近日,阿里正式开源轻量级深度学习端侧推理引擎“MNN”。 AI科学家贾扬清如此评价道:“与 Tensorflow、Caffe2 等同时覆盖训练和推理的通用框架相比,MNN 更注重在推理时的加速和优化,解决在模型部署的阶段的效率问题,从而在移动端更高效地实现模型背后的业务。这和服务器端 TensorRT 等推理引擎的想法不谋而合。在大规模机器学习应用中,考虑到大规模的模型部署,机器学习的推理侧计算量往往是训练侧计算量的十倍以上,所以推理侧的优化尤其重要。” MNN背后的技术框架如何设计?未来有哪些规划?今天一起来深入了解。 1、MNN是什么? MNN 是一个轻量级的深度学习端侧推理引擎,核心解决深度神经网络模型在端侧推理运行问题,涵盖深度神经网络模型的优化、转换和推理。目前,MNN已经在手淘、手猫、优酷、聚划算、UC、飞猪、千牛
相关文章
文章评论
共有0条评论来说两句吧...