时间:2021-05-20
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬!
这是坚持学习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,仅供参考,如果有更好的方式 欢迎一起学习研究。
总结
以上所述是小编给大家介绍的React Navigation 导航栏样式调整+底部角标消息提示 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Android带数字或红点的底部导航拦和联网等待加载动画首先展示一下截图效果,下载地址在文章最后一、Android带红点的底部导航拦1.首先写底部导航栏的界面v
本文介绍了react-navigation之动态修改title的内容,分享给大家,具体如下:效果图:动态修改title内容:staticnavigationOp
看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单。我就写个demo,试了一下。一、主要构成按
当我们需要做一个类似顶部或底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件,并且改变导航栏按钮的样式,如果用跳转的时候,我们可以这样做,改变rou
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能。