Заметки про React: “Отличия React и React Native Хоть React и React Native имеют много общ…”

Отличия 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