Проблема с (tabs) на React Native (Expo)
В проекте React native (expo) я использую встроенный роутинг от expo-router я создал app/(tabs)/_layout.tsx в котором я хочу сделать чтобы вкладка избранное не отображалось в tabs (нижней строке), если пользователь не авторизован:
import { Tabs } from 'expo-router';
import { StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '../auth/AuthProvider';
export default function TabLayout() {
const { user } = useAuth();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: 'blue',
tabBarInactiveTintColor: 'gray',
tabBarLabelStyle: styles.tabLabel,
}}
>
<Tabs.Screen name="index" options={{
title: 'Фильмы',
tabBarIcon: ({ color }) => (
<Ionicons name="film" size={24} color={color} />
),
}} />
{user && (
<Tabs.Screen
name="favorites"
options={{
title: 'Избранное',
tabBarIcon: ({ color }) => (
<Ionicons name="heart" size={24} color={color} />
),
}}
/>
)}
</Tabs>
);
}
const styles = StyleSheet.create({
tabLabel: {
fontSize: 14,
fontWeight: 'bold',
},
});
в таком примере приложение выдает ошибку:
WARN Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom . Update Layout Route at: "app/(tabs)/_layout" [Component Stack]
Такой вариант тоже не работает:
<Tabs.Screen name="favorites" options={{
title: 'Избранное',
tabBarIcon: ({ color }) => (
<Ionicons name="heart" size={24} color={color} />
),
tabBarStyle: user ? {} : { display: 'none' },
tabBarIconStyle: user ? {} : { display: 'none' },
tabBarShowLabel: user ? true : false,
}}
/>
При таком варианте скрывается только иконка, но остается текст "Избранное", а так же необходимо сделать чтобы первый элемент Tab screen растягивался и оставался один пока пользователь не авторизован.