React-Native-顶部导航栏实现

在先前底部导航栏的基础上添加顶部导航栏。
版本环境:react-native:0.60.5 react-navigation:4.0
实现需要的第三方库(之前实现底部导航栏时已添加):react-navigation,react-navigation-tabs
代码实现:
1.需要4个不同的导航页面,页面1代码如下,其他类似,也可自己编写

import {View, Text} from 'react-native';

export default class Project1 extends Component {
  render() {
    return (
      
        This is Project1
      
    );
  }
}

2路由导航页面编写,导入相应的第三方库

import {createAppContainer} from 'react-navigation';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';

将导航的几个页面导入进来

import Project1 from './project/Project1';
import Project2 from './project/Project2';
import Project3 from './project/Project3';
import Project4 from './project/Project4';

3.顶部导航编写,代码如下

export const TopTab = createAppContainer(
  createMaterialTopTabNavigator(
    {
      /*Project1路由*/
      Project1: {
        /*Project1页面*/
        screen: Project1,
        navigationOptions: {
          /*导航标签名*/
          tabBarLabel: '项目1',
        },
      },
      Project2: {
        screen: Project2,
        navigationOptions: {
          tabBarLabel: '项目2',
        },
      },
      Project3: {
        screen: Project3,
        navigationOptions: {
          tabBarLabel: '项目3',
        },
      },
      Project4: {
        screen: Project4,
        navigationOptions: {
          tabBarLabel: '项目4',
        },
      },
    },
    {
      tabBarOptions: {
        tabStyle: {
          minWidth: 20,
        }, //设置单个tab的样式
        upperCaseLabel: false, //是否使标签大写,默认为true
        scrollEnabled: true, //是否支持 选项卡滚动,默认false
        // activeTintColor: 'white',//label和icon的前景色 活跃状态下(选中)
        // inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下(未选中)
        style: {
          backgroundColor: '#678', //TabBar 的背景颜色
        },
        indicatorStyle: {
          height: 2,
          backgroundColor: 'white',
        }, //设置 indicator(tab下面的那条线)的样式

        labelStyle: {
          fontSize: 13,
          marginTop: 6,
          marginBottom: 6,
        }, //设置TabBar标签的样式
      },
    },
  ),
);

4.在底部导航栏页面中将顶部导航栏引入并使用


image.png

顶部导航栏页面的完整代码:

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';

import Project1 from './project/Project1';
import Project2 from './project/Project2';
import Project3 from './project/Project3';
import Project4 from './project/Project4';

export const TopTab = createAppContainer(
  createMaterialTopTabNavigator(
    {
      /*Project1路由*/
      Project1: {
        /*Project1页面*/
        screen: Project1,
        navigationOptions: {
          /*导航标签名*/
          tabBarLabel: '项目1',
        },
      },
      Project2: {
        screen: Project2,
        navigationOptions: {
          tabBarLabel: '项目2',
        },
      },
      Project3: {
        screen: Project3,
        navigationOptions: {
          tabBarLabel: '项目3',
        },
      },
      Project4: {
        screen: Project4,
        navigationOptions: {
          tabBarLabel: '项目4',
        },
      },
    },
    {
      tabBarOptions: {
        tabStyle: {
          minWidth: 20,
        }, //设置单个tab的样式
        upperCaseLabel: false, //是否使标签大写,默认为true
        scrollEnabled: true, //是否支持 选项卡滚动,默认false
        // activeTintColor: 'white',//label和icon的前景色 活跃状态下(选中)
        // inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下(未选中)
        style: {
          backgroundColor: '#678', //TabBar 的背景颜色
        },
        indicatorStyle: {
          height: 2,
          backgroundColor: 'white',
        }, //设置 indicator(tab下面的那条线)的样式

        labelStyle: {
          fontSize: 13,
          marginTop: 6,
          marginBottom: 6,
        }, //设置TabBar标签的样式
      },
    },
  ),
);

效果图:


image.png
image.png

随便写的,希望对你有帮助。

你可能感兴趣的:(React-Native-顶部导航栏实现)