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

Question

我想在这里创建一个Tab栏，就像在this question上显示的那个，但我不希望它位于屏幕的顶部或底部。我的应用中必须有一个标题，具有某种风格，一些信息，并且只能在标签栏之后。我试图用React-Natigation实现它，但似乎默认情况下你只能在屏幕的顶部或底部创建标签栏。

到目前为止，我为Tab Bar创建了一个示例代码：

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）不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。

你有什么建议来实现那样的标签栏吗？我甚至不需要一个真正的“导航”栏，因为它的目的是过滤一些数据，所以每次点击一个标签，我只想调用一个函数，因为它发生在具有onPress功能的项目上，比如按钮。

Answer 1

您可以在StackNavigator中嵌套TabBar。

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);

希望有所帮助

---