react native fast shadow Download - react native fast shadow Source Code Скачать

react native fast shadow

Другой исходный код

v0.1.1

Скачать

? Реактивно-пастбище

Быстрые и высококачественные тени Android для Great Native

Почему

React Native поддерживает только тени на Android через подъемную опору, но достижение желаемого эффекта часто невозможно, поскольку он поставляется только с очень небольшими пресетами. Сторонние библиотеки были созданы, чтобы обойти это, но при использовании во многих представлениях они могут сделать вас приложением медленнее или значительно увеличить потребление памяти.

Функции

? ‍♀ проще в использовании: замена погружения для компонента <View>
⚡ Вывод: тени могут быть применены к большому количеству просмотров без какого -либо значительного воздействия на производительность. Он был оптимизирован для низкого потребления памяти и быстрого рендеринга
? Настраиваемый: поддерживает все обычные теневые реквизиты, shadowRadius , shadowColor , shadowOpacity и shadowOffset
Universal: работает на всех платформах. На iOS и Web, <ShadowedView> - это просто псевдоним <View>

Начиная

npm install react-native-fast-shadow
# or
yarn add react-native-fast-shadow

Использование:

 import { ShadowedView } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { {
    shadowOpacity : 0.4 ,
    shadowRadius : 12 ,
    shadowOffset : {
      width : 5 ,
      height : 3 ,
    } ,
  } }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView >

Shadowstyle ():

Утилита shadowStyle() также может быть использована, чтобы облегчить создание стилей тени и поддерживать тени последовательными платформами Accoss. Он создаст ту же опору style , что и выше, но разделяет радиус тени на 2 на iOS (что по некоторым причинам, тени iOS слишком велики в 2 раза по сравнению с инструментами проектирования или с коробками CSS):

 import { ShadowedView , shadowStyle } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { shadowStyle ( {
    opacity : 0.4 ,
    radius : 12 ,
    offset : [ 5 , 3 ] ,
  } ) }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView >

Как это работает под капюшоном

На Android теневые натягиваемые создаются с помощью следующего процесса (см. Shadowfactory.java для получения более подробной информации):

Форма вида (прямоугольник с закругленными углами) окрашена в черное на холсте
Гауссовое размытие применяется на холсте с данным shadowRadius с использованием API рендеров
Затем натягиваемое преобразуется в девятипоставок, чтобы гарантировать, что углы тени не будут искажены, когда вид будет изменен. Таким образом, мы можем генерировать лишь небольшую тень, которую можно использовать и использовать его для всех видов с одной и той же границей и радиусами размытия.
Наконец, нарисовано отображается за содержанием вида: он окрашен shadowColor / shadowOpacity и компенсируется в соответствии с shadowOffset

Как работает NinePatchDrawable (обратите внимание на то, как углы не строятся при изменении притяжения):

Поиск неисправностей

React-C-Fast-Shadow поставляется со следующими ограничениями:

Он работает только с округлыми прямоугольниками: в отличие от реализации iOS <View> , <ShadowedView> не будет работать с свободными представлениями. Он ожидает, что его прямой потомковый вид станет округлым прямоугольником (до круга). Решения: для затенения <Text> Элементы вы можете использовать TextShadowRadius. Для сложных форм React-Clinate-Androw-ваш лучший вариант.
<ShadeedView> ожидает, что его представление с детьми заполнит его: вам решать, что <ShadowedView> и его дети имеют такой же размер, в противном случае тень будет больше, чем содержание (вы можете думать о <ShadowedView> как представление с цветом фона).
Угловые радиусы можно сделать неправильно: мы используем стиль <ShadowedView> или стиль его прямого ребенка, чтобы вывести угловые радиусы для применения. Если ваша иерархия просмотра более сложна, угловые радиусы могут быть выведены неправильно. Решение: переработайте иерархию вашего взгляда или передайте borderRadius непосредственно к style Prop of <ShadowedView> .
Радиус тени ограничен 25 или ниже: это ограничение происходит от эффекта размытия renderscript. Решение: дайте нам знать, если это проблема для вас. Это, вероятно, может быть оборвано, уменьшив растровую карту Shadow, прежде чем наносить эффект размытия.

Эталон

В следующей таблице сравнивается потребление памяти от react-native-fast-shadow , реагирующих, а также и реагирующих-известных-кад-2, когда рендеринг 100 150x200pt <Image> на пикселе 2 с тени радиуса 12pt. Приложение было построено с использованием варианта отладки и Гермеса.