МҚ_ЗЖ_7 (1)

1.

Модуль II.
Навигация, архитектура және
қосымшаның күйі
ЗЕРТХАНАЛЫҚ ЖҰМЫС 7
Пайдаланушы баптауларын,
қосымшаның тақырыбы мен күйін іске асыру
TypeScript, Context API және AsyncStorage арқылы баптауларды сақтау.
Оқытушы: Блен Жанерке Жайлыбекқызы

2.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 02
Жұмыс мақсаты
Campus Hub қосымшасына пайдаланушы баптауларының экранын қосу
Ашық және қараңғы тақырыпты ауыстыру
Қаріп өлшемін пайдаланушы таңдауы бойынша өзгерту
Қосымшаның ортақ күйін Context API арқылы басқару
Таңдалған баптауларды AsyncStorage ішінде сақтау
Негізгі нәтиже: пайдаланушы баптаулары барлық экрандарға әсер етеді және қайта іске қосылғанда сақталады
02

3.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 03
Күтілетін нәтиже
Баптаулар
Баптаулар
Тақырып
Тақырып
Ашық
Қараңғы
Қаріп өлшемі
Қаріп өлшемі
A−
A
A+
Ашық тақырып
A−
A
A+
Қараңғы тақырып
03

4.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 04
Негізгі ұғымдар
1
Қосымша күйі
Экрандар арасында ортақ қолданылатын ағымдағы деректер
3
Пайдаланушы баптауы
Пайдаланушы өзі таңдайтын және кейін сақталатын параметр
2
Тақырып
Түстер, фон және мәтін стилінің біртұтас жиыны
4
Тұрақты сақтау
Қосымша қайта ашылғаннан кейін де мәнді қалпына келтіру
04

5.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 05
Баптауды өзгерту үдерісі
1
Пайдаланушы
таңдайды
2
›
3
Context күйді
жаңартады
›
Экрандар қайта
салынады
4
›
AsyncStorage сақтайды
5
›
Қайта ашқанда
жүктейді
Бір SettingsContext барлық экрандар үшін ортақ дереккөз болады
05

6.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 06
1-қадам. AsyncStorage орнату
cd campus-hub
npx expo install @react-native-async-storage/async-storage
npx expo start -c
Түсіндірме: AsyncStorage тақырып пен қаріп параметрлерін құрылғыда сақтайды
06

7.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 07
2-қадам. Жоба құрылымы
Қосылатын файлдар
src/
├── context/
│
└── SettingsContext.tsx
├── screens/
│
└── SettingsScreen.tsx
└── theme/
└── themes.ts
Қолданыстағы файлдар
App.tsx
src/navigation/
RootNavigator.tsx
src/screens/
HomeScreen.tsx
ProfileScreen.tsx
SettingsContext баптауларды сақтайды, ал экрандар дайын мәндерді қолданады
07

8.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 08
3-қадам. Баптаулар типін сипаттау
export type ThemeMode = 'light' | 'dark';
export type FontScale = 'small' | 'normal' | 'large';
export type Settings = {
theme: ThemeMode;
fontScale: FontScale;
};
Түсіндірме: TypeScript тек рұқсат етілген тақырып пен қаріп мәндерін қабылдайды
08

9.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 09
4-қадам. Ашық және қараңғы тақырып
export const themes = {
light: { background: '#F4F8FC', card: '#FFFFFF',
text: '#102A43', primary: '#0B66E4' },
dark: { background: '#101827', card: '#1B2638',
text: '#F7FAFC', primary: '#20C5F5' },
};
export type AppTheme = typeof themes.light;
Түсіндірме: түстер бір файлда сақталады, сондықтан барлық экранда бірдей қолданылады
09

10.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 10
5-қадам. SettingsContext дайындау
type SettingsContextValue = Settings & {
colors: AppTheme;
setTheme: (value: ThemeMode) => void;
setFontScale: (value: FontScale) => void;
resetSettings: () => void;
};
const SettingsContext = createContext<
SettingsContextValue | undefined
>(undefined);
Түсіндірме: Context күйді және оны өзгертетін функцияларды бір интерфейске біріктіреді
10

11.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 11
6-қадам. Бастапқы күй және сақтау кілті
const STORAGE_KEY = '@campus_hub_settings';
const initialSettings: Settings = {
theme: 'light',
fontScale: 'normal',
};
const [settings, setSettings] =
useState<Settings>(initialSettings);
Түсіндірме: кілт бір жерде анықталады, ал алғашқы іске қосылғанда бастапқы мәндер қолданылады
11

12.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 12
7-қадам. Сақталған баптауларды жүктеу
useEffect(() => {
const loadSettings = async () => {
const saved = await AsyncStorage.getItem(STORAGE_KEY);
if (saved) setSettings(JSON.parse(saved));
setIsReady(true);
};
loadSettings();
}, []);
Түсіндірме: бос тәуелділіктер массиві кодты қосымша ашылғанда бір рет орындайды
12

13.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 13
8-қадам. Күй өзгергенде сақтау
useEffect(() => {
if (!isReady) return;
AsyncStorage.setItem(
STORAGE_KEY,
JSON.stringify(settings)
);
}, [settings, isReady]);
Түсіндірме: settings өзгерген сайын жаңа мән JSON мәтіні ретінде сақталады
13

14.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 14
9-қадам. Баптауларды өзгерту функциялары
const setTheme = (theme: ThemeMode) =>
setSettings(current => ({ ...current, theme }));
const setFontScale = (fontScale: FontScale) =>
setSettings(current => ({ ...current, fontScale }));
const resetSettings = () =>
setSettings(initialSettings);
Түсіндірме: spread операторы өзгермейтін баптауларды сақтап, тек қажетті өрісті жаңартады
14

15.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 15
10-қадам. Provider мәнін беру
const colors = themes[settings.theme];
return (
<SettingsContext.Provider value={{
...settings, colors,
setTheme, setFontScale, resetSettings,
}}>
{children}
</SettingsContext.Provider>
);
Түсіндірме: themes объектісінен ағымдағы режимге сәйкес түстер таңдалады
15

16.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 16
11-қадам. App компонентіне қосу
export default function App() {
return (
<SettingsProvider>
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</SettingsProvider>
);
}
Түсіндірме: Provider навигацияны қоршағандықтан, барлық экран баптауларға қол жеткізеді
16

17.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 17
12-қадам. useSettings hook
export function useSettings() {
const value = useContext(SettingsContext);
if (!value) {
throw new Error(
'useSettings must be inside SettingsProvider'
);
}
return value;
}
Түсіндірме: жеке hook Context-ті әр экранда қысқа әрі қауіпсіз қолдануға мүмкіндік береді
17

18.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 18
13-қадам. Settings экранын құру
const { theme, fontScale, colors,
setTheme, setFontScale } = useSettings();
<Switch
value={theme === 'dark'}
onValueChange={(enabled) =>
setTheme(enabled ? 'dark' : 'light')
}
/>
<Button title="A+" onPress={() => setFontScale('large')} />
Түсіндірме: экран күйді тікелей сақтамайды, тек Context функцияларын шақырады
18

19.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 19
14-қадам. Тақырыпты экранда қолдану
const { colors, fontScale } = useSettings();
const fontSize = {
small: 14,
normal: 17,
large: 21,
}[fontScale];
<View style={{ flex: 1, backgroundColor: colors.background }}>
<Text style={{ color: colors.text, fontSize }}>
Campus Hub
</Text>
</View>
Түсіндірме: экран түстер мен қаріп өлшемін ортақ күйден алады
19

20.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 20
15-қадам. Жобаны тексеру
Қосымшаны іске қосып, Settings экранын ашыңыз
Тақырыпты ашықтан қараңғыға ауыстырыңыз
Home және Profile экрандарындағы түстердің өзгергенін тексеріңіз
Қаріп өлшемін өзгертіп, мәтіннің жаңарғанын бақылаңыз
Қосымшаны толық жауып, қайта ашыңыз
Сақталған баптаулардың автоматты қалпына келгенін тексеріңіз
Тексеру шарты: баптау кемінде Home, Profile және Settings экрандарына әсер етуге тиіс
20

21.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 21
Жиі кездесетін қателер
1
Provider табылмады
SettingsProvider компоненті NavigationContainer-ді қоршағанын
тексеріңіз
3
Тақырып өзгермейді
Экранда colors мәндері useSettings арқылы алынғанын тексеріңіз
2
AsyncStorage undefined
Пакетті Expo арқылы орнатып, жобаны қайта іске қосыңыз
4
Мән сақталмайды
setItem кілті мен getItem кілті бірдей болуға тиіс
21

22.

ЗЕРТХАНАЛЫҚ ЖҰМЫС 7 • 22
Студенттерге практикалық тапсырма
1
Негізгі тапсырма
Campus Hub жобасына Settings экранын қосыңыз. Ашық және
қараңғы тақырыпты, үш қаріп өлшемін іске асырыңыз.
SettingsContext құрып, баптауларды AsyncStorage ішінде сақтаңыз.
Өзгерістер Home, Profile және Settings экрандарында көрінуі керек.
2
Қосымша тапсырмалар
«Баптауларды қалпына келтіру» батырмасын қосыңыз. Қосымша
алғаш ашылғанда құрылғының жүйелік тақырыбын анықтаңыз. Тіл
таңдау параметрін қосыңыз. Баптаулар жүктелгенше Splash күйін
көрсетіңіз.
Тапсыру: толық жоба, Settings экранының екі тақырыптағы скриншоттары және қайта іске қосқаннан кейін баптаулардың сақталғанын көрсету
22