React Native顶|底部导航使用小技巧-阿里云开发者社区

开发者社区> 嗯哼9925> 正文

React Native顶|底部导航使用小技巧

简介:
+关注继续查看

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。

好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。

 

本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我

 简介

react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为:

  • 导航 -> StackNavigator
  • 底部或者顶部tab -> TabNavigator
  • 侧滑 -> DrawerNavigator

我们今天主要讲TabNavigator。

 效果展示

 实现代码

复制代码
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Button,
    Text,
    View,
    Image,
    StatusBar
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";


class Home extends React.Component {
    static navigationOptions = {
        tabBarLabel: '热点',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是热点</Text>
            </View>
        );
    }
}

class Circle extends React.Component {
    static navigationOptions = {
        tabBarLabel: '圈子',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是圈子</Text>
            </View>
        );
    }
}

class Tools extends React.Component {
    static navigationOptions = {
        tabBarLabel: '工具',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是工具</Text>
            </View>
        );
    }
}

class Mypage extends React.Component {
    static navigationOptions = {
        tabBarLabel: '我的',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是我的</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    }
});


const MyApp = TabNavigator(
    {
        Home: {
            screen: Home,
        },
        Circle: {
            screen: Circle,
        },
        Tools: {
            screen: Tools,
        },
        Mypage: {
            screen: Mypage,
        },
    },
    {
        tabBarOptions: {
            activeTintColor: '#4BC1D2',
            inactiveTintColor: '#000',
            showIcon: true,
            showLabel: true,
            upperCaseLabel: false,
            pressColor: '#823453',
            pressOpacity: 0.8,
            style: {
                backgroundColor: '#fff',
                paddingBottom: 0,
                borderTopWidth: 0.5,
                borderTopColor: '#ccc',
            },
            labelStyle: {
                fontSize: 12,
                margin: 1
            },
            indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
        },
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        backBehavior: 'none',
    });

module.exports = MyApp;
复制代码

 配置说明

NavigationOptions
当然,通过NavigationOptions来配置我们的tabBarItem:
title - 标题
tabBarVisible - 是否可见
tabBarIcon - 配置图片,当然,完全可以不使用图片
tabBarLabel - 也是配置标题,只不过title既能配置tab的标题,也能配置navigation的标题

 

TabNavigatorConfig 
tabBarComponent- 用作标签栏的组件,例如 (这是iOS上的默认设置), (这是Android上的默认设置)TabBarBottomTabBarTop
tabBarPosition- 标签栏的位置可以是或'top''bottom'
swipeEnabled - 是否允许在标签之间进行滑动
animationEnabled - 是否在更改标签时动画
lazy - 是否根据需要懒惰呈现标签,而不是提前制作
tabBarOptions - 配置标签栏,如下所示。
几个选项被传递到底层路由器来修改导航逻辑:
initialRouteName - 首次加载时初始标签路由的routeName
order - 定义选项卡顺序的routeNames数组
paths - 将routeName映射到路径配置,该配置将覆盖routeConfigs中设置的路径。
backBehavior - 后退按钮是否会使Tab键切换到初始选项卡?如果是,否则设置。默认为行为。initialRoutenoneinitialRoute


tabBarOptions for (iOS上的默认标签栏)TabBarBottom 
activeTintColor - 活动标签的标签和图标颜色
activeBackgroundColor - 活动选项卡的背景颜色
inactiveTintColor - 非活动标签的标签和图标颜色
inactiveBackgroundColor - 非活动标签的背景颜色
showLabel - 是否显示标签的标签,默认为true
style - 标签栏的样式对象
labelStyle - 标签标签的样式对象
tabStyle - 标签的样式对象


tabBarOptions for (Android上的默认标签栏)TabBarTop 
activeTintColor - 活动标签的标签和图标颜色
inactiveTintColor - 非活动标签的标签和图标颜色
showIcon - 是否显示标签的图标,默认值为false
showLabel - 是否显示标签的标签,默认为true
upperCaseLabel - 是否使标签大写,默认为true
pressColor - 材质波纹颜色(Android> = 5.0)
pressOpacity - 按压标签的不透明度(iOS和Android <5.0 only)
scrollEnabled - 是否启用可滚动选项卡
tabStyle - 标签的样式对象
indicatorStyle - 标签指示器的样式对象(选项卡底部的行)
labelStyle - 标签标签的样式对象
iconStyle - 标签图标的样式对象
style - 标签栏的样式对象

 

小技巧

1.去掉安卓下的下划线,设置:tabBarOptions => indicatorStyle:{ height: 0 };

2.底部导航在导航最上方添加一条分割线,设置:tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc';

3.导航安卓图标和文字间隙比较大,手动调整小设置:tabBarOptions => labelStyle => margin: 0;

 





本文转自王磊的博客博客园博客,原文链接:http://www.cnblogs.com/vipstone/p/7516115.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
在Asp系统中使用ActivePython
在Asp系统中中使用ActivePython,一条升级老系统的路
1618 0
Android Native禁止使用系统私有库详解
解读Android Native对于系统私有库的限制,老版本的黑科技代码在N版本之后都可能导致APP崩溃。
1777 0
使用div创建选取框
使用div实现了选取框效果. 代码如下 1 2 3 4 myCanvasTest 5 6 #selection{ 7 border: 3px red solid; 8 ...
544 0
Azkaban 任务调度系统(使用和小技巧)
上节主要介绍了安装搭建和简单的运行一个job,但是真正使用到实际场景还是需要了解更多的知识,比如任务怎么互相依赖,可以选择指定的节点来执行吗等等一些相关的操作会在本节中进行介绍
363 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载