如何在React Native中创建标签导航栏

我想创建一个像Twitter上的标签栏一样。我的应用程序中必须有一个特定样式，一些信息，并且只有在标签栏之后才有一个标题。我正在尝试使用React-Natigation实现它，但是默认情况下，您只能在屏幕的顶部或底部创建标签栏。

到现在为止，我为标签栏创建了一个示例代码：

import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Settings!</Text>
      </View>
    );
  }
}
const TabNavigator = createMaterialTopTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});
export default createAppContainer(TabNavigator);

这是我希望此选项卡栏出现的屏幕代码：

import React from 'react';
import { Text, View } from 'react-native';
import { TabNavigator } from './../MyTab.js'
class App extends React.Component {
  render() {
    return (
      <View>
        <Text style={...some style...}>Title</Text>
        <Text>Some text</Text>
        <TabNavigator />
      </View>
    );
  }
}
export default App;

但此代码失败，错误：

设备：（101：380）不变违规：元素类型是无效的：预期的字符串（用于内置组件）或类/函数（用于复合组件），但got：undefined。

。

您是否有任何建议像这样实现标签栏吗？我什至不需要一个真正的"导航"栏，因为它的目的是过滤一些数据，因此每次点击选项卡时，我都只想调用一个函数，因为它对于具有OnPress函数的项目，就像按钮一样。

import React from 'react';
import { View, Text } from 'react-native';
import { 
    createStackNavigator, 
    createAppContainer, 
    createMaterialTopTabNavigator } 
    from 'react-navigation';

class StackScreen extends React.Component{
 render(){
  return(
    <View>
     <Text>Title</Text>
     <Text>Some text</Text>
   </View>
   )
 }
}

const TabNavi = createMaterialTopTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

const StackNavi = create StackNavigator({
  Main: {screen: TabNavi,
   navigationOptions: ({navigation}) => ({
      header: <StackScreen navigation= {navigation} />,
    })
  },
});
export default createAppContainer(StackNavi);