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

Question

我想创建一个选项卡栏，就像在此处 this question 中显示的 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;

但是此代码失败并出现错误：

Device: (101:380) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

你对实现这样的标签栏有什么建议吗？我什至不需要真正的 "navigation" 栏，因为它的目的是过滤一些数据，所以每次我点击一个选项卡时，我只是想调用一个函数，因为它发生在具有 onPress 函数的项目上，像按钮。

Answer 1

您可以将 TabBar 嵌套在 StackNavigator 中。

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

希望对您有所帮助

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

How to create a tab navigation bar in React Native?

react-native

react-native-navigation