Эффект родной тени React

React Native

предисловие

Эффект тени является очень распространенным требованием в приложении, и его можно напрямую передать в css3.box-shadowРеализация свойства, конец RN для iOS, также может быть реализована с помощью следующего кода, аналогичного

    //只支持iOS端
    shadowColor: '#999',  //设置阴影色
    shadowOffset:{width:0,height:0},  //设置阴影偏移,该值会设置整个阴影的偏移，width可以看做x,height可以看做y,x向右为正，y向下为正
    shadowOpacity: 1,
    shadowRadius: 1.5,  //设置阴影模糊半径,该值设置整个阴影的半径，默认的效果就是View的四周都有阴影

Но приведенный выше код не поддерживает Android, на стороне Android вы можете пройтиelevationсвойства для реализации

    //该值只在android5.0(包含)以上的机型才支持
    //无法指定阴影的颜色以及偏移，只能设置阴影的高度
    //阴影效果主要在底部，其它三面也有一个层次感,跟ios四面阴影效果不一样
    elevation:1.5,

Однако стили представления этих двух платформ сильно различаются. Если вы не возражаете, вы можете напрямую объединить свойства двух платформ и ссылаться на них там, где вам нужно их использовать:

 viewShadow:{
      //该属性只支持>=android 5.0
      elevation:1.5,
      shadowColor:gColors.color999,
      shadowOffset:{width:0,height:0},
      shadowOpacity: 1,
      shadowRadius: 1.5,
}


<View style={[{},Styles.viewShadow]}>

</View>

Эффект: (Разница между двумя концами все еще очень велика)

iOS:

android:

В частности, вы можете просмотреть:stackoverflow.com/questions/4…

выбор библиотеки

Библиотека использует библиотеку svgreact-native-svgНарисованная тень, поэтому эффект обоих концов одинаков, использование следующее:

const shadowOpt = {
	width:100,
	height:100,
	color:"#000",
	border:2,
	radius:3,
	opacity:0.2,
	x:0,
	y:3,
	style:{marginVertical:5}
}

...

render = () => {
	return (
		<View>
			<Shadow setting={shadowOpt}>
				<View style={{width:100,height:100}}/>
			</Shadow>
		</View>
	)
}

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

Библиотека iOS использует теневой атрибут, поставляемый с RN, а на стороне Android используется компонент CardView в библиотеке поддержки, поэтому на стороне Android необходимо интегрировать собственный код, использование выглядит следующим образом:

import CardView from 'react-native-cardview'
<CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5}>
          <Text>
              Elevation 0
          </Text>
</CardView>

Уведомление:

  • 1. Лучше всего установить фоновое значение для CardView, иначе будет выдано много следующих предупреждений
YellowBox.js:71 (ADVICE) View #257 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.
  • 2. Если вам нужны закругленные углы, установитеcornerRadiusВот и все, вам не нужно устанавливать дочерний элементborderRaduis



Не заботьтесь о ширине и высоте, отлично, давайте посмотрим на беговой эффект:

iOS:

android:

Ну, это все же немного другое, но это лучше, чем использование свойств

В заключение

|Имя|Собственные зависимости|Плюсы|Минусы| |--|--|--|--|--| |RN поставляется со свойствами|Нет|Нет необходимости интегрировать какую-либо родную библиотеку|1. Между двумя концами существует большая разница.
2. Не поддерживает установку цвета
3.Android поддерживает толькоelevationатрибут| |react-native-shadow|зависимостьreact-native-svg| 1. Эффект на обоих концах почти одинаковый
2. Поддерживает множество атрибутов, таких как цвет | 1. Вы должны установить ширину и высоту | |react-native-cardview| Android-сторона библиотеки является родной | 1. По сравнению с методом 1, она поддерживает больше атрибутов | 1. Между двумя концами все еще есть различия (лучше, чем метод 1)
|



  • 1. Если вам не нужно иметь одинаковый эффект на обоих концах, и вам не нужно поддерживать устройства Android до android5 (сейчас редко), вы можете напрямую использовать атрибуты, которые идут с RN

  • 2. Если вам нужно иметь одинаковый эффект на обоих концах или вам нужно установить цвет тени, вы можете использовать толькоreact-native-shadow, недостатком является то, что должны быть установлены фиксированные высота и ширина (библиотека зависит отreact-native-svg)

  • 3. Затем выберитеreact-native-cardview, эффект относительно близок, и оба являются родными эффектами iOS/Android.







ps: если вам нужен файл определения ts для react-native-cardview, вы можете скопировать его напрямуюpull61Файл ts внутри, хотя пулл был слит, он не выпущен в npm (по состоянию на 16.12.2019)

разное

Статистика, совместное использование и авторизация RN Umeng Umeng

полное обновление android глючит

Высокопроизводительные компоненты выбора Wheel Picker (дата, период времени, провинция и город, трехуровневая связь)

РН собственноручная подпись

Навигационная библиотека карт RN Gaode

RN реализует очистку локального кеша

RN реализует настраиваемое горячее обновление с отправкой кода

Приложение RN для управления кодовым сервером

Приложение RN Blog Park

Категории