Специфичные хуки

useWindowDimensions - Возвращает актуальные размеры окна и обновляется при повороте экрана или изменении размеров окна. Хук, подписывается на изменения (при повороте экрана компонент перерендерится).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useWindowDimensions, View, Text } from 'react-native';  function ResponsiveComponent() {  const { width, height, scale, fontScale } = useWindowDimensions();    // Адаптивная верстка  const isLandscape = width > height;  const isTablet = width > 768;    return (    <View style={{      width: width * 0.9,           // 90% ширины экрана      padding: width > 500 ? 24 : 16,      flexDirection: isLandscape ? 'row' : 'column',    }}>      <Text>Ширина: {width}, Высота: {height}</Text>      <Text>Масштаб: {scale}, Масштаб шрифта: {fontScale}</Text>    </View>  );}

useColorScheme - Возвращает текущую цветовую схему устройства, установленную пользователем в настройках ОС

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
mport { useColorScheme, View, Text, StyleSheet } from 'react-native';  function ThemedComponent() {  const colorScheme = useColorScheme(); // 'light' | 'dark' | null    const styles = StyleSheet.create({    container: {      backgroundColor: colorScheme === 'dark' ? '#000' : '#fff',    },    text: {      color: colorScheme === 'dark' ? '#fff' : '#333',    },  });    return (    <View style={styles.container}>      <Text style={styles.text}>        Текущая тема: {colorScheme === 'dark' ? '🌙 Темная' : '☀️ Светлая'}      </Text>    </View>  );}

useAccessibilityInfo - Позволяет узнать, включены ли на устройстве специальные возможности: экранный диктор (VoiceOver/TalkBack), уменьшенное движение, высокая контрастность и т.д.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { useAccessibilityInfo, Text } from 'react-native';  function AccessibleComponent() {  const {    isScreenReaderEnabled,      // VoiceOver/TalkBack включен?    isReduceMotionEnabled,      // уменьшенное движение?    isAccessibilityServiceEnabled, // Android: сервис доступности включен?    isBoldTextEnabled,          // iOS: жирный текст?    isGrayscaleEnabled,         // iOS: оттенки серого?    isInvertColorsEnabled,      // iOS: инверсия цветов?  } = useAccessibilityInfo();    return (    <View>      <Text>        {isScreenReaderEnabled && '🔊 Экранный диктор активен'}      </Text>      {isReduceMotionEnabled && (        <Text>♿️ Анимации отключены (используем fade вместо slide)</Text>      )}    </View>  );}