Основные встроенные компоненты

<View> - аналог <div>

<Text> - юбой текст на экране должен быть внутри <Text>

<TextInput> - аналог <input> / <textarea>

Кнопки:

Button - нельзя стилизовать (только цвет), нет кастомных детей.

TouchableOpacity - стандарт для 90% кнопок

1
2
3
4
5
6
7
8
9
<TouchableOpacity  onPress={() => {}}  activeOpacity={0.7}        // прозрачность при нажатии (0-1)  disabled={false}  style={styles.button}>  <Text style={styles.buttonText}>Кастомная кнопка</Text>  <Icon name="arrow" /></TouchableOpacity>

TouchableHighlight - с цветовым фидбеком

1
2
3
4
5
6
7
<TouchableHighlight  onPress={() => {}}  underlayColor="#ddd"        // цвет подложки при нажатии  activeOpacity={0.8}>  <View><Text>Кнопка</Text></View></TouchableHighlight>

TouchableWithoutFeedback - без визуального фидбека

1
2
3
<TouchableWithoutFeedback onPress={() => {}}>  <View><Text>Невидимая зона клика</Text></View></TouchableWithoutFeedback>

ScrollView - для маленьких списков (всё рендерится сразу). До 20-30 элементов, неизвестная высота, разнородный контент.

FlatList - для больших списков (виртуализация)

Ключевые отличия FlatList:

• Автоматическая переиспользование компонентов (как key в React)
• renderItem получает { item, index, separators }
• Разделители: ItemSeparatorComponent — линия между элементами

<Image>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Локальное изображение (требует require)<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />  // Сетевое изображение (нужен uri)<Image   source={{ uri: 'https://example.com/image.jpg' }}  style={{ width: 200, height: 200 }}  resizeMode="cover"          // cover, contain, stretch, repeat, center  onLoad={() => console.log('загружено')}  onError={(e) => console.log('ошибка', e.nativeEvent.error)}/>  // Для фонового изображения — используй ImageBackground<ImageBackground source={require('./bg.png')} style={{ flex: 1 }}>  <Text>Поверх картинки</Text></ImageBackground>

<SafeAreaView> - Только для iPhone X и новее (с «челкой» и динамическим островом)

1
2
3
4
5
import { SafeAreaView } from 'react-native';  <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>  <Text>Контент не залезет под челку</Text></SafeAreaView>

<Modal>

1
2
3
4
5
6
7
8
9
10
11
12
13
<Modal  visible={isVisible}  transparent={true}           // прозрачный фон  animationType="slide"        // slide, fade, none  onRequestClose={() => setIsVisible(false)}  // для Android (кнопка назад)>  <View style={styles.modalOverlay}>    <View style={styles.modalContent}>      <Text>Модальное окно</Text>      <Button title="Закрыть" onPress={() => setIsVisible(false)} />    </View>  </View></Modal>

<ActivityIndicator> - лоадер

1
2
3
4
5
<ActivityIndicator  size="large"        // small, large, или число (Android)  color="#0000ff"  animating={true}/>

<StatusBar> - управление верхней панелью

1
2
3
4
5
6
<StatusBar   barStyle="light-content"   // dark-content, light-content, default  backgroundColor="black"    // только Android  translucent={true}         // полупрозрачная  hidden={false}/>