React Native предоставляет набор основных компонентов — таких как View, Text, Image, ScrollView, TextInput — которые отображаются на встроенные элементы UI. Они являются фундаментальными строительными блоками пользовательских интерфейсов React Native, используемые вместо веб-элементов HTML.
React Native uses its OWN components (mapping to native views), NOT HTML:
VIEW → a container (like a <div>) — the basic layout building block
TEXT → display text (ALL text must be inside a <Text>, unlike web)
IMAGE → display images (local or remote)
TEXTINPUT → text input field (like an <input>)
SCROLLVIEW → a scrollable container
FLATLIST → an efficient scrollable LIST (for long lists — renders lazily)
TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas)
BUTTON → a basic button
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
function Profile() {
return (
<View style={styles.container}> {/* container (like a div) */}
<Image source={{ uri: 'https://...' }} style={styles.avatar} />
<Text style={styles.name}>Ann</Text> {/* text MUST be in <Text> */}
<TextInput placeholder="Email" />
<TouchableOpacity onPress={() => {}}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
✓ Use <View> not <div>, <Text> not <p>/<span>; ALL text must be in <Text>
✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling
✓ Touchables/Pressable for interactions (not onClick on divs)
✓ FlatList for long lists (efficient) — not mapping over everything
Понимание основных компонентов — это фундамент разработки React Native, потому что они являются строительными блоками каждого пользовательского интерфейса React Native — вы их компонуете для создания интерфейсов, поэтому это обязательное базовое знание.
React Native предоставляет собственные компоненты, которые отображаются на встроенные представления (а не на веб-элементы HTML), и понимание основных — View (контейнер, как div), Text (для всего текста, с важным правилом, что весь текст должен быть внутри компонента Text, в отличие от веб), Image, TextInput, ScrollView, FlatList (для эффективной отрисовки длинных списков) и touchables/Pressable (для обработки касаний) — необходимо для создания любого пользовательского интерфейса React Native.
Понимание ключевых отличий от веб особенно важно для веб/React-разработчиков, переходящих на React Native: использование View вместо div и Text вместо p/span (с правилом all-text-in-Text), стилизация через свойство style вместо CSS-классов/файлов, использование touchables/Pressable для взаимодействия вместо onClick и использование FlatList для длинных списков (которые отрисовываются эффективно/лениво) вместо маппирования всего — эти отличия являются частыми подводными камнями, которые понимание основных компонентов проясняет.
Компоненты компонуются (как React) для создания пользовательских интерфейсов, при этом View является фундаментальным контейнером.
Поскольку основные компоненты являются строительными блоками каждого пользовательского интерфейса React Native (вы их постоянно используете для создания интерфейсов) и понимание их и того, как они отличаются от веб-HTML, является фундаментальным для создания приложений React Native (особенно для веб-разработчиков), понимание основных компонентов — это необходимое, фундаментальное знание React Native — базовый словарь React Native UI, необходимый для создания любого интерфейса и для адаптации знаний веб-React к модели встроенных компонентов, ключевая компетенция при разработке React Native.