Заметки про React
Отличия React и React Native
Хоть React и React Native имеют много общего, внутри они довольно разные. В блоге Expo вышла статья о различиях между React и React Native, которая поможет составить общую картину о разработке нативных приложений на React Native и Expo.
В нативных приложениях нельзя использовать HTML теги, вместо них используются UI примитивы:
// Блок
<div></div>
<View></View>
// Изображение
<img src="https://domain.com/static/my-image.png" />
<Image source={{ uri: "https://domain.com/static/my-image.png" }} />
// Текст
<p>Hello</p>
<Text>Hello</Text>
// Список
array.map(item => <span>>{item.name}</span>)
<FlatList
data={posts}
renderItem={({ item }) => (
<Text>{item.name}</Text>
)}
/>
В нативных приложениях нет глобальных стилей. Все стили инлайновые и передаются в элемент через тег style:
export function MyComponent() {
return (
<View style={styles.container}>
<Text style={styles.greeting}>Set Reminder</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
padding: 24,
},
greeting: {
fontSize: 24
},
});
Также по умолчанию все элементы имеют стиль display: flex. Флексы работают немного иначе чем на вебе, например, flexDirection по умолчанию column (вместо row).
При начале работ на React Native новички допускают ошибки:
🔴 Использование array.map. Если нужно отрендерить список элементов, то вместо array.map нужно использовать FlatList, который умеет оптимально рендерить большие списки и поддерживает виртуализацию.
🔴Используют элемент Button из React Native. Этот элемент плохо стилизуется и не практичен. Вместо него используйте TouchableOpacity.
🔴Используют логические операторы AND (&&). Если случайно в них вернуть '', NaN или 0, то React Native не отрендерит их как текст. В этом случае произойдет крах приложения.
https://expo.dev/blog/from-web-to-native-with-react
23 · 3.5K ·