react-navigation简单导航

Posted wang.man

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-navigation简单导航相关的知识,希望对你有一定的参考价值。

进入项目,在命令行中运行以下代码
yarn add react-navigation //加入react-navigation导航
npm install react-native-vector-icons --save //加入react-native-vector-icons图标

新建

Home 、Table 、Echart 、Me 四个js文件

home.js
import React, { Component } from ‘react‘;
import { View, Text } from ‘react-native‘;

export default class Home extends Component {
    render() {
        return (
            <View>
                <Text>首页</Text>
            </View>
        );
    }
}

App.js

import React from ‘react‘;
import { View, Text,Button } from ‘react-native‘;
import { TabNavigator } from ‘react-navigation‘;
import Ionicons from ‘react-native-vector-icons/Ionicons‘;
import Home from ‘./src/home‘;
import Table from ‘./src/table‘;
import Echart from ‘./src/echart‘;
import Me from ‘./src/me‘;

const Tabs = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions: {  // 也可以写在组件的static navigationOptions内
            tabBarLabel: ‘首页‘,
            tabBarIcon: ({ focused ,tintColor}) => (
                <Ionicons
                    name={focused ? ‘ios-happy‘ : ‘ios-happy-outline‘}
                    size={28}
                    style={{ color: tintColor }}
                />
            ),
        }
    },
    Table: {
        screen: Table,
        navigationOptions: {
            tabBarLabel: ‘表格‘,
            tabBarIcon: ({ focused,tintColor}) => (
                <Ionicons
                    name={focused ? ‘ios-keypad‘ : ‘ios-keypad-outline‘}
                    size={28}
                    style={{ color: tintColor }}
                />
            ),
        }
    },
    Echart: {
        screen: Echart,
        navigationOptions: {
            tabBarLabel: ‘图表‘,
            tabBarIcon: ({ focused,tintColor}) => (
                <Ionicons
                    name={focused ? ‘ios-stats‘ : ‘ios-stats-outline‘}
                    size={28}
                    style={{ color: tintColor }}
                />
            ),
        }
    },
    Me: {
        screen: Me,
        navigationOptions: {
            tabBarLabel: ‘我的‘,
            tabBarIcon: ({ focused,tintColor }) => (
                <Ionicons
                    name={focused ? ‘ios-contact‘ : ‘ios-contact-outline‘}
                    size={28}
                    style={{ color: tintColor }}
                />
            ),
        }
    }
}, {
    animationEnabled: false, // 切换页面时是否有动画效果
    tabBarPosition: ‘bottom‘, // 显示在底端,android 默认是显示在页面顶端的
    swipeEnabled: false, // 是否可以左右滑动切换tab
    backBehavior: ‘none‘, // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
    tabBarOptions: {
        activeTintColor: ‘#00a4bf‘, // 文字和图片选中颜色
        inactiveTintColor: ‘#6e6e6e‘, // 文字和图片未选中颜色
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        indicatorStyle: {
            height: 0  // 如TabBar下面显示有一条线,可以设高度为0后隐藏
        },
        style: {
            backgroundColor: ‘#fff‘, // TabBar 背景色
            height: 56,
        },
        pressColor: ‘#d7f8fa‘, //涟漪效果的颜色(安卓版本需要大于5.0)
        labelStyle:{
            fontSize: 12,
            margin: 1
        }, //label的样式
        iconStyle:{}, //图标样式
        pressOpacity:0.8  //按压标签的透明度变化
    },
});

export default Tabs;

 

以上是关于react-navigation简单导航的主要内容,如果未能解决你的问题,请参考以下文章

使用`react-navigation`导航时如何触发render()方法?

react-navigation 做导航栏,发现 Android 上的标题不居中

react-navigation android 导航标题居中

如何在 React-Navigation 中单击底部选项卡导航器时打开 DrawerNavigator?

React-native 组件缓存(或防止卸载)(react-navigation)

react-navigation 导航路由