react-native 中如何在 tabnavigator 上方添加 stacknavigator 标头？答案

【问题标题】：How to add stacknavigator header above the tabnavigator in react native?react-native 中如何在 tabnavigator 上方添加 stacknavigator 标头？
【发布时间】：2018-04-06 11:04:49
【问题描述】：

如何在 react native 应用程序中的 tabnavigator 上方添加 stacknavigator header？切换时，header 必须存在于所有选项卡上方？这是 homescreen.js 的代码，其中包含 Tabnavigator 组件？这个标题也可以有文本 ?

import React, { Component } from 'react';
import {StyleSheet,Text,View, Image, Dimensions} from 'react-native';
import { TabNavigator } from 'react-navigation';
import ChatScreen from './ChatScreen.js';
import TaskScreen from './Task/TaskScreen.js';
import FormScreen from './FormScreen.js';
import Directory from './Directory.js';
import Menu from './Menu.js';

const initialLayout = {
     height: 0,
     width: Dimensions.get('window').width,
    };  
var MainScreenNavigator = TabNavigator({
  Directory: { screen: Directory },
  ChatScreen: { screen: ChatScreen },
  TaskScreen: { screen: TaskScreen },
  FormScreen: { screen: FormScreen },
  Menu: { screen: Menu },
},
  {
    tabBarPosition: 'top',
    animationEnabled: true,
    tabBarOptions: {
      inactiveTintColor: '#9fffa9',
      activeTintColor: '#ffffff',
      style: {
        backgroundColor: '#00dc17',
      },
      labelStyle: {
        fontSize: 16,
        fontWeight: '400',
        fontFamily: 'WorkSans-SemiBold',
      },
      tabStyle: {

      },
      indicatorStyle: {
        backgroundColor: '#fff',
        height: 2
      }
    },
  }
);
MainScreenNavigator.navigationOptions = {
  header: false,
};
export default MainScreenNavigator;

【问题讨论】：

请不要添加不必要的标签 react-native 和 react-navigation 足以描述您的问题！
在你的 StackNavigation 路由选项中添加这个 title: 'Some Title 添加标题
@Raaj Nadar-thanks- 如何在我向下滚动时隐藏此标题并在向上滚动时再次显示？我的聊天和任务选项卡有另一个子选项卡导航器。
你需要一个事件监听器来滚动medium.com/appandflow/…

标签： react-native header react-navigation tabnavigator stack-navigator

【解决方案1】：

您需要将 Root TabNavigator 嵌套在 StackNavigator 中，以便在切换时 Header 必须出现在所有选项卡之上。

只需创建一个 StackNavigator：

const RootNavigator = StackNavigator.create({MainScreenNavigator: { screen: MainScreenNavigator}})

你可以走了。

【讨论】：