新年祝贺,金根男爵,黄南
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬!
这是坚持学习react-native
的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是,也是rn社区主推的一个导航库。
网上关于react-navigation
的基本使用也是一抓一大把,这里对于它的使用不做过多介绍,主要记录使用过程中的其他问题。
因为android 和ios 手机的不同,导航栏的显示也不太一样,而这篇文章会尽量的配置属性,让两端的导航栏样式、页面跳转的动画保持一致,同时还会介绍底部导航栏添加角标的方法。
这里使用的是3.9.1版本,网上好多文章是2.x版本的,用法基本大同小异。
默认情况下,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的导航栏还有阴影的样式,添加elevation
设置阴影的偏移量
defaultnavigationoptions:{ headerstyle:{ backgroundcolor:"#fff", elevation:0.5 }, ... }
至此的导航栏的效果跟ios基本保持一致。
默认的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,仅供参考,如果有更好的方式 欢迎一起学习研究。
欢迎关注我的个人博客:
更多精彩欢迎关注微信号:春风十里不如认识你
一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Android Manifest中meta-data扩展元素数据的配置与获取方式
Android实现获取meta-data和build.gradle的值
Android获取清单文件中的meta-data,解决碰到数值为null的问题
解决webview 第二次调用loadUrl页面不刷新的问题
解决Android WebView拦截url,视频播放加载失败的问题
Android webview加载https链接错误或无响应的解决
网友评论