التنقّل بين الشاشات

import { useState } from 'react';import { View, Text, Pressable, StyleSheet } from 'react-native'; function Home({ go }) {  return (    <View style={styles.screen}>      <Text style={styles.h}>🏠 الرئيسية</Text>      <Pressable style={styles.btn} onPress={() => go('details')}>        <Text style={styles.bt}>افتح التفاصيل ←</Text>      </Pressable>    </View>  );} function Details({ go }) {  return (    <View style={styles.screen}>      <Text style={styles.h}>📄 التفاصيل</Text>      <Pressable style={styles.btn} onPress={() => go('home')}>        <Text style={styles.bt}>→ رجوع</Text>      </Pressable>    </View>  );} export default function App() {  const [screen, setScreen] = useState('home');  return screen === 'home'    ? <Home go={setScreen} />    : <Details go={setScreen} />;} const styles = StyleSheet.create({  screen: { padding: 24, alignItems: 'center', gap: 14 },  h: { fontSize: 24, fontWeight: 'bold' },  btn: { backgroundColor: '#E8820C', paddingVertical: 10, paddingHorizontal: 18, borderRadius: 10 },  bt: { color: 'white', fontSize: 16 },});

import { useState } from 'react';import { View, Text, Pressable, StyleSheet } from 'react-native'; const TABS = [  { key: 'home', label: '🏠 الرئيسية' },  { key: 'cart', label: '🛒 السلّة' },  { key: 'me', label: '👤 حسابي' },]; export default function App() {  const [tab, setTab] = useState('home');  const current = TABS.find(t => t.key === tab);  return (    <View style={{ flex: 1, minHeight: 240 }}>      <View style={styles.body}>        <Text style={styles.big}>{current.label}</Text>      </View>      <View style={styles.tabbar}>        {TABS.map(t => (          <Pressable key={t.key} style={styles.tab} onPress={() => setTab(t.key)}>            <Text style={[styles.tt, tab === t.key && styles.active]}>{t.label}</Text>          </Pressable>        ))}      </View>    </View>  );} const styles = StyleSheet.create({  body: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },  big: { fontSize: 22, fontWeight: 'bold' },  tabbar: { flexDirection: 'row', borderTopWidth: 1, borderColor: '#eee' },  tab: { flex: 1, padding: 12, alignItems: 'center' },  tt: { color: '#888' },  active: { color: '#E8820C', fontWeight: 'bold' },});