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 (
      <View>
        <Text>This is Project1</Text>
      </View>
    );
  }
}

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

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