Как добавить компоненты выше 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

Мне пришлось завернуть Tab Navigator и пользовательские компоненты внутри React.Fragment

Итак, мой код выглядит примерно так

<>
<MyCustomView>

</MyCustomView>
<Tab.Navigator>

</Tab.Navigator>
</> 

Обертывание всего этого внутри View или SafeAreaView у меня не работает

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

Вы можете создать отдельный файл для панели вкладок, а затем импортировать этот файл (файл панели вкладок) на главный экран.

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

Answer 4

В простоте

1. если у вас есть только одна tabBar в вашем приложении, поместите ваш Component поверх TopTabNavigation, но оба они должны находиться внутри NavigationContainer, как показано ниже

   `import { createMaterialTopTabNavigator } из '@response-navigation/material- top-tabs'; импортировать { NavigationContainer } из "@response-navigation / native";

   const Tab = createMaterialTopTabNavigator ();

   function MyTabs () {return (); } `

2. Второй сценарий: у вас есть эта навигация внутри другой навигации, отчасти это внутренняя навигация / вложенная навигация, все, что вам нужно сделать в приведенном выше коде, - это добавить 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>
  );
}`