react native shadow 2
v7.1.1
Важный
Новый Native Native 0,76 , выпущенный 23 октября 2024 года , наконец поддерживает кроссплатформенную тень!
Эта новая функция должна быть предпочтительной над этой библиотекой.
Я могу лишь искренне оценить поддержку и доброту каждого за последние почти 4 года и отпраздновать, что достиг 39 тыс. Еженедельно и 2 м .
Если вы ищете страстного профессионала с 5 -летним опытом в области TypeScript, React и React Native, свяжитесь со мной по адресу [email protected]!
React-Cnative-Shadow мертва в течение многих лет. Это улучшенная версия с большим количеством функциональных возможностей, поддержкой TypeScript и написанной с нуля. Не требуется определять его размер: тень разумно применяется на первом рендеринге, а затем точно повторно применяется на следующих.
Он решает старую нативную проблему реагирования о том, что не имеет такой же тени и использования для Android, iOS и Web.
Веб-сайт EtherCreative/React-Knative-Shadow-Shadow не даст вам очень похожие результаты между двумя платформами, по причинам, которые я здесь описал. Это также не так настраивается, как эта библиотека.
Совместим с Android, iOS и Web. И выставка!
Поддерживает RTL.
Попробуйте эту библиотеку!
Рекомендуется последняя версия
react-native-svg, в том числе при использовании Expo.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| Свойство | Описание | Тип | По умолчанию |
|---|---|---|---|
| Startcolor | Начальный градиент цвет тени. | string | '#00000020' |
| EndColor | Окончательный градиент цвет тени. | string | Прозрачный стартколор. Объяснение. |
| расстояние | Как далеко заходит тень. | number | 10 |
| компенсировать | Перемещает тень. Отрицательный x перемещает его влево/старт, отрицательный y перемещает его.Принимает значения 'x%' .Определение этого будет по умолчанию по paintInside в True , так как это обычное желаемое поведение. | [x: string | number, y: string | number] | [0, 0] |
| PaintInside | Примените тень ниже/внутри содержимого. startColor используется в качестве цвета заполнения, без градиента.Полезно при использовании offset или если у вашего ребенка есть некоторая прозрачность. | boolean | false , но true если определено offset |
| боки | Стороны, которые будут нарисовать их тени. Не включает углы. Неопределенные стороны отступают в True . Объяснение. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| угла | Углы, которые будут нарисовать их тени. Неопределенные углы запасены до True . Объяснение. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| стиль | Стиль взгляда, который завершает ваших детей. Прочитайте примечания ниже. | StyleProp<ViewStyle> | undefined |
| ContainersTyle | Стиль вид, который завершает тень и ваших детей. Полезно для поля. | StyleProp<ViewStyle> | undefined |
| потягиваться | Сделайте своих детей замаскировать все доступное горизонтальное пространство. Объяснение. | boolean | false |
| SAFERENDER | Не будет использовать относительный размер и позиционирование на 1 -м рендере, но на следующем рендере с точными размерами. Полезно, если иметь дело с радиусами, превышающими размеры сторон (например, круг), чтобы избежать визуальных артефактов на 1 -м рендере. Если true , тень не появится на 1 -м рендере. | boolean | false |
| неполноценный | Отключает тень. Полезно для легко использования компонентов, так как иногда тени не желательны.containerStyle и style все еще применяются. | boolean | false |
Если у тени есть один ребенок, она получит width , height и все свойства borderRadius от свойства style детей, если они определены.
Вы также можете определить эти свойства в style тени. Определенные свойства здесь будут иметь приоритет над теми, которые определены в style ребенка.
Если width и height определены в любом из них, будет только один рендеринг, так как первый автоматический размеры не произойдет, только точный рендеринг.
Вы можете использовать либо 'borderTopLeftRadius' , либо 'borderTopStartRadius' и их вариации для определения радиусов углов, хотя я рекомендую последнее, поскольку это стандарт RTL.
Наличие радиуса, превышающего его сторону, будет испортить тень, если размеры не определены. Вы можете использовать свойство safeRender , чтобы показать тень только на 2 -м рендере и за его пределами, когда у нас есть точный размер компонента, а радиусы должным образом ограничены.
Radii, превышающие 2000 ( rounded-full зал,-9999), может быть, майт Android.
Непрозрачность устанавливается непосредственно в свойствах startColor и endColor , в альфа -канале. Например: '#0001' - почти прозрачный черный. Вы также можете использовать '#rrggbbaa' , 'rgba()' , 'hsla()' и т. Д.
Используйте свойство stretch или style={{alignSelf: 'stretch'}} в вашем теневом компоненте. Объяснение!
Экспортируется тип ShadowProps , реквизит теневого компонента. Вы можете сделать следующее:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset и size - это ошибки TypeScript!Обновите свой TypeScript как минимум до 4.0.0! В этих двух свойствах используются помеченные кортежи . Если вы не используете TypeScript, этого не произойдет.
