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

Rexam 发表于 Dev

雷克萨姆

我想创建一个标签栏，就像在此问题中也显示在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）不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

您是否有实施这样的标签栏的建议？我什至不需要真正的“导航”栏，因为它的目的是过滤一些数据，因此，每次我点击选项卡时，我只是想调用一个函数，因为它发生在具有onPress函数的项（例如按钮）上。

显示名称

您可以将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);

希望能有所帮助

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。