如何在createMaterialTopTabNavigator上面添加组件？

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 上方添加一些文本和按钮，然后显示 createMaterialTopTabNavigator.

我尝试在自己的屏幕中添加 createMaterialTopTabNavigator 组件，但它不可见。我也尝试添加上面的组件 Tab.Navigator 但它们不起作用

Answer 1

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

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

Answer 2

用父视图包裹你的标签

我分享了一个有效的代码片段。

将其用作 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 3

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

中

所以我的代码看起来像下面这样

<>
<MyCustomView>

</MyCustomView>
<Tab.Navigator>

</Tab.Navigator>
</>

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

Answer 4

简单

如果您的应用程序中只有这一个 tabBar 将您的组件放在 TopTabNavigation 之上，但它们都应该在里面 NavigationContainer 如下

`从'@react-navigation/material-导入{createMaterialTopTabNavigator} top-tabs'; 从“@react-navigation/native”导入 {NavigationContainer}；

const Tab = createMaterialTopTabNavigator();

函数 MyTabs() { return ( ); }`
第二种情况是你在其他导航中有这个导航，某种程度上这是一个内部 navigation/Nested 导航在上面的代码中，你所要做的就是在你的 NavigationContainer 上添加 independent={true} as prop 否则你会得到一个错误提示 nested 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上面添加组件？

How to add components above createMaterialTopTabNavigator?

react-native

react-navigation-v5