ReactNative学习笔记(八)——TabNavigator,TextInput,Image属性补充

        今天进行界面的练习,第一个界面拥有一个底部导航栏,有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: 居中不拉伸。


参考:

ReactNative中文网

react-navigation使用技巧

ReactNative导航新宠儿react-navigation

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值