ReactNative学习笔记（八）——TabNavigator，TextInput，Image属性补充

最新推荐文章于 2024-05-12 09:40:38 发布

只会写HelloWorld

最新推荐文章于 2024-05-12 09:40:38 发布

阅读量504

点赞数

分类专栏： ReactNative

本文链接：https://blog.csdn.net/mikuoohash/article/details/80023007

版权

ReactNative 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天进行界面的练习，第一个界面拥有一个底部导航栏，有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