如何在反应原生的tabnavigator上面添加stacknavigator标头？

Question

如何在反应原生应用程序中的tabnavigator上方添加stacknavigator标头？切换时，标题必须出现在所有标签上方？这里是包含Tabnavigator组件的homescreen.js的代码吗？此标头也可以包含文字 ？

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;

Answer 1

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

只需创建一个StackNavigator：

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

你很好。