今天进行界面的练习,第一个界面拥有一个底部导航栏,有4个标签,进行4个不同页面的切换。在写的过程中,需要用到TabNavigator的属性,之前只是简单的实现了一下,今天详细了解了一下,在这里做一个补充:
一,隐藏StackNavigator的顶部标题栏
const routers = StackNavigator({
MainRoutre:{screen:MainRouter},
},{
navigationOptions:{
header:null, //隐藏顶部标题栏
}
});
二,TabNavigator的属性介绍
TabNavigator的构造函数:TabNavigator(RouteConfigs, TabNavigatorConfig);两个参数都是对象
路由文件
const Router = TabNavigator(
{
One:{screen: One}, //配置route,有4个界面,在One这个对象里,你也可以配置navigationOptions,但是我习惯在各自的页面里配置
Two:{screen: Two},
Three:{screen: Three},
Four:{screen: Four},
},
{
tabBarComponent:TabBarBottom, //TabBarBottom或者TabBarTop 前者会隐藏导航栏指示条,并且文字不会下移。如果没有指定这个的话
animationEnabled:false, //动画不可用 导航栏会有一个指示条,并且文字会下移
tabBarPosition:'bottom', //导航栏在底部
swipeEnabled:false, //不可左右滑动
lazy:true, //懒加载可用,一次性把TabNavigator中的所有页面都加载出来
tabBarOptions:{
//indicatorStyle:{height:0}, 导航底部指示条的样式,如果不想显示的话,高度置为0
style:{backgroundColor:'#FFF',height:40}, //导航栏的样式
activeTintColor:'#EB0707', //被选中时文字和图片的颜色
inactiveTintColor:'#757575', //未被选中时文字和图片的颜色
showIcon:true //是否显示图标,默认false,不显示地置为true的话,即使设置了图片,也不会显示
},
});
单独的界面,在组件的类里配置各自的属性,比如图标和名子1
static navigationOptions = {
tabBarLabel:'我的',
tabBarIcon:({tintColor,focused})=><Image //tintColor是上面文件配置的颜色,focused是标签的选中状态
source={require('./img/ic_me.png')}
style={{width:20,height:20,tintColor:tintColor}} //如果你想显示的图片颜色与tintColor不一致,这里就不用指定tintColor
/> //可以通过focused来判断是否被选中,来选择不同的图片
}
三,常见Bug解决
1,如果TabNavigator的子界面里有TextInput,那么在点击输入框时,底部导航栏会被软键盘顶起,显示在软键盘上方
解决办法:
在android/app/src/main 里的AndroidManifest.xml里修改
在application标签里加上属性 android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"
如果activity里也有android:windowSoftInputMode属性的话,可以删掉,保留application里的就行
2,快速点击底部导航栏的不同按钮,会发现停止点击后,界面还在反复切换
其他文章里有目前看到有两种解决方法:一,修改react-navigation源文件 二,手动进行拦截
目前还没掌握,以后会了的话,再来补充
四,TextInput的属性补充:
placeholder='请输入一些文字' //提示信息
placeholderTextColor='#919193' //提示信息文字的颜色
underlineColorAndroid='transparent' //默认输入框下面有一条线,可以把它隐藏
五,Image的属性补充:
1,Image没有onPress属性,如果想要点击的话,通过Touchable系列组件来进行包裹
2,resizeMode属性
resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')
决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。①cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。
②contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白
③stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。
④repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
⑤center: 居中不拉伸。
参考: