Мне всегда было интересно писать о высокоуровневых функциях и высокоуровневых компонентах в JavaScript, но мне не хватало возможности создавать значимые функции в моих проектах. Функция высшего порядка принимает функцию в качестве аргумента или возвращает функцию как функцию. Компонент более высокого порядка - это функция, которая принимает компонент и возвращает новый компонент. В своем стремлении создавать приложения React Native я наткнулся на необходимость создания повторно используемых компонентов для надлежащего масштабирования моих приложений.
Мой опыт работы с React Native был связан с простым голым CLI и версиями EXPO CLI. В Bare React Native есть две отдельные папки для управления компонентами для Android и IOS. В EXPO приложение управляет обоими приложениями за вас. Возникает проблема: компоненты будут отображаться по-разному в зависимости от экранов телефона Android и iPhone. Создать приложение, которое будет работать в обеих операционных системах, означает учесть прихоти обеих.
Вырез на iPhone X и строка состояния на многих устройствах Android приведут к тому, что компоненты рендеринга будут находиться в разных положениях. Чем больше экранов я создаю в своих приложениях, тем больше стилей мне потребуется, чтобы исправить мои компоненты с учетом различий ... если я не использую компоненты более высокого порядка для унификации моих экранов.
import { SafeAreaView } from 'react-native';
import Constants from 'expo-constants';
Мне нужен компонент SafeAreaView из библиотеки react-native, чтобы учесть расстояние между выемками в верхней части iPhone X. Это гарантирует, что мои компоненты не будут отображаться в небезопасной области выемок. Мне понадобятся константы из библиотеки expo-constants и извлечение компонента statusBarHeight для учета «безопасного» интервала для верхней части моего экрана Andriod. Мне нужно было создать компонент более высокого порядка, который мог бы учитывать обе проблемы с интервалом и использовать созданный компонент на экранах, которые должны отображать контент из верхней области просмотра. Я создал следующий компонент SafeScreen более высокого порядка, чтобы мои экраны отображались должным образом.
import React from 'react'
import Constants from 'expo-constants';
import { SafeAreaView, StyleSheet, View } from 'react-native';
const SafeScreen =({ children, style })=>{
return(
<SafeAreaView style= {[styles.container, style ]}>
<View style={[styles.view], style}>
{children}
</View>
</SafeAreaView>
)
}
export default SafeScreen
const styles = StyleSheet.create({
container:{
flex:1,
paddingTop:Constants.statusBarHeight
}
})
Этот компонент SafeScreen при импорте в другие компоненты преобразует дочерние свойства и отображает их в видимой области экрана. Поскольку я реализовал в этом компоненте исправления как для Andriod, так и для iPhone, любой экран, на котором используется этот компонент, будет безопасно отображать дочерние элементы. Этот компонент будет многоразовым и избавит меня от необходимости переписывать код SafeScreen. Этот контейнер SafeScreen также может иметь свойство style. Благодаря опоре стиля мои компоненты, которые использовали этот экран, могут быть настроены и стилизованы по своему усмотрению. Таблица стилей в этом компоненте будет управлять только областью видимости, но эту таблицу стилей можно использовать для внесения всеобъемлющих изменений в мои экраны просмотра. Наличие многоразового кода означает уменьшение необходимости создавать более расточительный код и значимо перерабатывать мой код.
Написание повторно используемого кода упрощает создание новых компонентов или частей приложения. Повторно используемый код также упрощает внесение изменений в компоненты, использующие этот фрагмент.
Мой код компонента более высокого порядка не идеален, но я смогу обновить этот код и лучше масштабироваться, когда буду кодировать больше. Я надеюсь, что смогу лучше понять создание компонентов и функций по мере реализации большего количества приложений. Я надеюсь, что мои уроки помогут облегчить боль других.
До следующего раза, Ура!
Джеймс Ву
Использованная литература:
