Текстовые кнопки приложения Expo не обновляют текст, как на веб-странице ⇐ CSS

[Anonymous]

Цель, чтобы приложение Expo-go отображалось в браузере так, как показано ниже.
Вид в браузере: в представлении должен отображаться ВСЕ и НЕПРИТАННЫЙ текст на вкладках уведомлений, как это можно увидеть в представлении браузера здесь.


Вид Expo-go. Однако в мобильном представлении приложения Expo-go стиль изменился на круговой, без текста на вкладках уведомлений, как указано выше.


Журнал ошибок в приложении Expo go
Необнаруженная ошибка. java.io.IOException: не удалось загрузить удаленное обновление
Код в моем макете; Ниже приведен код, который стилизует макет моего приложения и веб-представления
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import 'react-native-reanimated';
import "../styles/global.css";

import { useColorScheme } from '@/hooks/use-color-scheme';
import React, { useState } from 'react';
import { useFonts } from 'expo-font';

import {
View,
Text,
TouchableOpacity,
FlatList,
StyleSheet,
SafeAreaView,
Dimensions,
} from 'react-native';

const { height: screenHeight } = Dimensions.get('window');

const NotificationScreen = () => {
const [activeTab, setActiveTab] = useState('All');

const notifications = [
{
id: '1',
title: 'You have a notification from CEO ...',
subtitle: 'You have able verify you account kindly click the link',
date: 'Jan 12, 2026',
}
];

const unreadNotifications = notifications.filter((_, index) => index === 0); // Simulate one unread

const filteredNotifications = activeTab === 'Unread' ? unreadNotifications : notifications;

type Notification = {
id: string;
title: string;
subtitle: string;
date: string;
};

const renderNotification = ({ item }: { item: Notification }) => (

{item.title}
{item.subtitle}
{item.date}

);
const ItemSeparator = () => {
return ;
};
return (



{/* Status Bar Simulation */}





{/* Header */}


‹


setActiveTab('All')}
>

All


setActiveTab('Unread')}
>

Unread





{/* Notification List */}
item.id}
ItemSeparatorComponent={ItemSeparator}
contentContainerStyle={styles.listContainer}
showsVerticalScrollIndicator={false}
style={styles.list}
/>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f9fa',
},

separator: {
height: 12,
},
statusBar: {
height: 44,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
backgroundColor: '#f8f8f8',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#c6c6c8',
},
time: {
fontSize: 17,
fontWeight: '600',
color: '#000',
},
signal: {
fontSize: 16,
},
iconsContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
iconText: {
fontSize: 12,
marginHorizontal: 2,
},
header: {
height: 60,
backgroundColor: 'white',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#e5e5e7',
},
backButton: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
marginRight: 8,
},
backIcon: {
fontSize: 24,
fontWeight: 'bold',
color: '#007aff',
},
tabs: {
borderRadius: 30,
margin: 3,
// width: 'auto', // Remove this
height: 50, // Increase slightly for better padding
flexDirection: 'row',
backgroundColor: 'white',
overflow: 'hidden',
// gap: 8, // Gap can be tricky in some RN versions
justifyContent: 'space-between', // Use flexbox alignment
padding: 3,
},
tab: {
paddingHorizontal: 20,
borderRadius: 30,
flex: 1, // Ensures tabs expand
height: '100%', // Take full container height
backgroundColor: '#f2f2f7',
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 4, // Use margin instead of gap
},
tabText: {
fontSize: 16,
fontWeight: '600',
// marginBottom: 4, // Remove to center text vertically
// backgroundColor: 'red', // Remove debugging color
},

tabActive: {
backgroundColor: '#040273',
},

tabTextActive: {
color: 'white',
},
list: {
gap: 19,
marginBottom: 16,
},
listContainer: {
padding: 16,
paddingTop: 16,
},
notificationCard: {
backgroundColor: '#dfdfdf',
borderRadius: 12,
padding: 16,
marginBottom: 12,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 3,
elevation: 2,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#e5e5e7',
},
notificationTitle: {
fontSize: 16,
fontWeight: '600',
color: '#000',
marginBottom: 4,
},
notificationSubtitle: {
fontSize: 15,
color: '#000',
lineHeight: 22,
marginTop: 20,
marginBottom: 20,
},
notificationDate: {
fontSize: 13,
color: '#000',
fontWeight: '400',
},
});

export default NotificationScreen;



Подробнее здесь: https://stackoverflow.com/questions/798 ... on-webpage