react-navigation简单导航

Posted 2020-10-20 wang.man

进入项目，在命令行中运行以下代码
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;