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

【问题标题】：How to create a tab navigation bar in React Native?如何在 React Native 中创建标签导航栏？
【发布时间】：2019-08-01 16:43:55
【问题描述】：

我想创建一个类似于 Twitter 上的标签栏，也显示在 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) Invariant Violation：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

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

【问题讨论】：

'./.../MyTab.js'三个点？
@Andrew 是的，错字，抱歉，我更正了，在我的代码中是正确的。
你能做到export const吗？示例-> export const TabNavigator = createMaterialTopTabNavigator({... 或者您应该导入默认示例->import TabNavigator from './../MyTab.js'

标签： react-native react-native-navigation

【解决方案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);

希望有帮助

【讨论】：