Question

以下是我的createMaterialTopTabNavigator

<Tab.Navigator
      lazy={true}
      tabBarOptions={{
        activeTintColor: "#9e39ff",
        inactiveTintColor: "#4b5358",
        showLabel: true,
        showIcon: true,
        tabStyle: {
          flexDirection: "row",
        },
      }}
    >
      <Tab.Screen
        name={CHAT_MATCH_SCREEN}
        component={ChatMatchScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <Image
              source={focused ? MATCHES_SELECTED_ICON : MATCHES_UNSELECTED_ICON}
            />
          ),
        }}
      />....

现在，我需要在createMaterialTopTabNavigator上方添加一些Text，Button，然后显示createMaterialTopTabNavigator。

我尝试在自己的屏幕上添加createMaterialTopTabNavigator组件，但该组件不可见。我还尝试在Tab.Navigator上方添加组件，但是它们将无法工作

Answer 1

使用父视图将标签包裹

我共享了一个工作代码段。

将此用作NavigationContainer

<NavigationContainer ref={'navigation'}>
        <Stack.Navigator initialRouteName={initialRoute}>
          <Stack.Screen
            name='Auth'
            component={AuthModule}
            options={{ headerShown: false }}
          />
        </Stack.Navigator>
      </NavigationContainer>

，您的标签页实现将是这样。

<View
          style={{
            flex: 1,
            backgroundColor: APP_COLORS.COLOR_BACKGROUND,
            flexDirection: 'column',
          }}
        >
          <View>
            <Text style={{ textAlign: 'center' }}>Top Text on Tabs</Text>
          </View>

          <Tab.Navigator
            initialRouteName={initialRouteName}
            tabBarOptions={{
              inactiveTintColor: APP_COLORS.COLOR_666666,
              activeTintColor: APP_COLORS.COLOR_BLACK,
              style: {
                backgroundColor: 'white',
                marginTop: 0,
                marginBottom: 0,
                height: 40,
              },
              indicatorStyle: {
                height: 3,
                backgroundColor: APP_COLORS.COLOR_THEME,
              },
              labelStyle: {
                fontFamily: 'MuseoSans700',
                lineHeight: 16,
                ...getFlipForRTLStyle(),
              },
            }}
          >
            <Tab.Screen
              name='Login'
              component={() => (
                <Login calbacks={this.props.CallBacks} data={this.props.data} />
              )}
              options={{
                title: 'Signin',
              }}
            />
            <Tab.Screen
              name='Register'
              component={() => (
                <Register
                  calbacks={this.props.CallBacks}
                  data={this.props.data}
                />
              )}
              options={{ title: 'Register' }}
            />
          </Tab.Navigator>
        </View>

Answer 2

您可以为标签栏创建一个单独的文件，然后将该文件（标签栏文件）导入主屏幕。

export default class Main extends Component {
render() {
    return (
        <View>
            <Customcomponent />{/* custom component */}
            <Tabbar />{/* Tabbar component */}
        </View>
    )
}}

Answer 3

我不得不将Tab Navigator和自定义组件包装在React.Fragment内

所以我的代码如下所示

<>
<MyCustomView>

</MyCustomView>
<Tab.Navigator>

</Tab.Navigator>
</>

将整个内容包装在View或SafeAreaView内对我不起作用

Answer 4

简单

如果应用程序上只有一个tabBar 将您的组件放在TopTabNavigation的顶部，但是它们两者都应该在内部 NavigationContainer如下

`import {createMaterialTopTabNavigator}来自'@ react-navigation / material- 顶级标签”；从“ @ react-navigation / native”导入{NavigationContainer};

const Tab = createMaterialTopTabNavigator（）;

function MyTabs（）{ 返回（）; }`
第二种情况是您将此导航置于其他导航的内部，某种程度上是内部导航/嵌套的导航您在上述代码上要做的就是在您的independent={true}上添加NavigationContainer作为道具，否则您将得到一条错误消息，提示嵌套的NavigationContainer

代码如下：

`import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import { NavigationContainer } from "@react-navigation/native";

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <NavigationContainer independent={true}>
     **<YourComponent />**
       <Tab.Navigator>
         <Tab.Screen name="Home" component={HomeScreen} />
         <Tab.Screen name="Settings" component={SettingsScreen} />
       </Tab.Navigator>
    </NavigationContainer>
  );
}`

如何在createMaterialTopTabNavigator上方添加组件？

4 个答案: