React Native: отзывчивые и адаптивные пользовательские интерфейсы

Адаптируемость, вероятно, является наиболее важной потребностью в приложении. Я постараюсь расположить некоторые из инструментов и советов, которые я использую, пытаясь сделать приложение реагировать на различную ОС, ориентации, доступную ширину и высоту и т. Д.

Общие советы:

Всегда устанавливайте мин и максимальную ширину, это помогает покрыть устройства с помощью экранов XS или XL
Используйте API Dimension, предоставленные REACT Native, если вы хотите установить ширину или высоту на основе доступных пикселей на экране устройства. Это отличается от использования процента в качестве процента будет соответствует родительскому представлению, и это сам экран.
Используйте keyboardingvoidingView, чтобы сметить вход, когда вы открываете клавиатуру любую платформу

Использование в качестве медиа -запроса

Работы API измерения могут быть сделаны для работы, аналогичных медиа -запросам в CSS. По сути, вы получаете ширину и высоту экрана, а затем изменение стилей для различных размеров, вероятно, является наиболее важной потребностью в приложении. Я постараюсь расположить некоторые из инструментов и советов, которые я использую, пытаясь сделать приложение реагировать на различную ОС, ориентации, доступную ширину и высоту и т. Д.

Объект Dimensions может быть использован любым в файле JS.

let containerStyles = styles.container;
let buttonStyles = styles.button;
let navStyles = styles.nav;

// Just like "@media screen and (max-width: 350px)"
if (Dimensions.get('window').width < 350) {
    containerStyles = styles.containerSmall;
    buttonStyles = styles.buttonSmall;
    navStyles = styles.navSmall;
}

Использование прямо в стилии

Как дает «dimensions.get (‘window’).

imageContainer: {
    width: Dimensions.get("window").width * 0.7,
    height: Dimensions.get("window").width * 0.7,
    borderRadius: (Dimensions.get("window").width * 0.7) / 2,
    borderWidth: 3,
    borderColor: "black",
    overflow: "hidden",
    marginVertical: 30,
  },

Использование для изменения ориентации

Размеры рассчитываются, когда приложение впервые рендерирует. Поэтому, если вы измените ориентацию устройства, оно не будет пересматриваться само по себе.

В таких случаях, крюк с использованием, предоставленный React, приходит на помощь.

Шаги:

Внутри крючка использования, создайте функцию, которая устанавливает конкретный стиль, используя API Dimensions
Добавьте слушатель событий в объект Dimensions для события «Изменить» и передайте более раннюю определенную функцию в качестве второго аргумента.

Вот так

...
// Sets the width initially!
const [buttonWidth, setButtonWidth] = useState(
    Dimensions.get("window").width / 4
  );

  useEffect(() => {
        // Sets the widht again if the widht changes,
        // i.e, from potrait to landscape or vice versa
    const updateLayout = () => {
      setButtonWidth(Dimensions.get("window").width / 4);
    };
    Dimensions.addEventListener("change", updateLayout);

    return () => {
      Dimensions.removeEventListener("change", updateLayout);
    };
  }, []);

return (
    ...
    
    
  
...
)

...

Подробнее на: https://reactnative.dev/docs/dimensions

Этот API предоставляется Expo. Основная цель этого API – предоставить информацию об ориентации экрана, а затем позволить вам что -то с этим сделать.

Вы получаете кучу методов для получения и ориентации блокировки, и добавляете слушателей событий к любому изменению ориентации. Подробнее о методах здесь: https://docs.expo.io/versions/latest/sdk/screen-onientation/

React Native предоставляет два способа организовать ваш код и разделить его на платформу:

Использование модуля платформы.
Использование специфического расширения файла платформы.

Модуль платформы

Это позволяет вам проверить, какую платформу (iOS, Android, Web и т. Д.) Ваше приложение работает. Супер полезно установить разные стили для разных типов платформы. Используйте эту опцию, когда только небольшие части компонента являются специфичными для платформы.

Здесь Platform.select () возвращает наиболее подходящее значение для платформы, на которой вы в настоящее время работаете. То есть, если вы используете устройство iOS, ключ “iOS” займет предпочтение !!

import React from "react";
import { View, StyleSheet, Text, Platform } from "react-native";

const Header = (props) => {
  return (
    
      {props.title}
    
  );
};

const styles = StyleSheet.create({
  header: {
    width: "100%",
    height: 90,
    paddingTop: 36,
    backgroundColor: "#CCA7B1",
    alignItems: "center",
    justifyContent: "center",
  },
  headerIos: {
    backgroundColor: "white",
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
  },
  headerAndroid: {
    backgroundColor: "#CCA7B1",
  },
});

export default Header;

Подробнее на: https://reactnative.dev/docs/platformpecifice-code#platform-module

Используя отдельные файлы

Если у вас есть целая куча кода, специфичного для платформы, аккуратный способ выполнить это-разделить код на несколько файлов.

Вот так

MainButton.android.js
MainButton.ios.js

Затем вы можете использовать компонент, как показано ниже, и отреагировать Native автоматически выбирать файл на основе платформы, на которой работает приложение.

import MainButton from "./components/MainButton"

Супер крутой не !!

Подробнее на: https://reactnative.dev/docs/platformpecifice-code#platformpecific-extensions

Не рекомендуется, но используется для защиты контента приложения от перекрытия выемками, боковыми расколами устройства и тому подобным.

Оригинал: “https://dev.to/holdmypotion/react-native-responsive-and-adaptive-user-interfaces-3c6d”