Привет, я пытаюсь установить тень для моей фабрики, но мои попытки потерпели неудачу, пока я попытался настроить теневые реквизиты, но это для ios, поэтому я попытался сыграть с свойством elevation, но это выглядит не так.
Вот что я пробовал
<View style={{width: 56, height: 56, elevation: 2, borderRadius: 28, marginBottom: 3, backgroundColor: 'rgba(231,76,60,1)'}}></View>
Что мне нужно достичь
ОБНОВИТЬ
Добавление свойства css elevation: 1 отображает тень в Android без установки сторонней библиотеки. Смотрите другие ответы.
-
Один из способов получить тени для Android - это установить react-native-shadow
Пример из файла readme:
import React, {Component} from 'react' import {
StyleSheet,
View,
Text,
ScrollView,
Image,
TouchableHighlight } from 'react-native'
import {BoxShadow} from 'react-native-shadow'
export default class VideoCell extends Component {
render = () => {
const shadowOpt = {
width:160,
height:170,
color:"#000",
border:2,
radius:3,
opacity:0.2,
x:0,
y:3,
style:{marginVertical:5}
}
return (
<BoxShadow setting={shadowOpt}>
<TouchableHighlight style={{
position:"relative",
width: 160,
height: 170,
backgroundColor: "#fff",
borderRadius:3,
// marginVertical:5,
overflow:"hidden"}}>
…………………………
</TouchableHighlight>
</BoxShadow>
)
}
}
Другое решение без использования сторонней библиотеки использует elevation.
Извлечен из документации, основанной на реакции. https://facebook.github.io/react-native/docs/view.html
(только для Android) Устанавливает высоту представления, используя Android базовый API. Это добавляет тени к элементу и влияет на z-порядок для перекрывающихся видов. Поддерживается только на Android 5.0+, не влияет на более ранние версии.
elevation войдет в свойство style и может быть реализовано так.
<View style={{ elevation: 2 }}>
{children}
</View>
Чем выше высота, тем больше тень. Надеюсь, это поможет!
Вы можете попробовать
//ios
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
height: 0,
width: 0
},
//android
elevation: 1
Следующее поможет вам придать каждой Platform желаемый стиль:
import { Text, View, Platform } from 'react-native';
......
<View style={styles.viewClass}></View>
......
const styles = {
viewClass: {
justifyContent: 'center',
alignItems: 'center',
height: 60,
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
},
android: {
elevation: 1
},
}),
}
};
для экрана Android вы можете использовать это свойство elevation.
например:
HeaderView:{
backgroundColor:'#F8F8F8',
justifyContent:'center',
alignItems:'center',
height:60,
paddingTop:15,
//Its for IOS
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
// its for android
elevation: 5,
position:'relative',
},
Я добавил borderBottomWidth: 0, и он работал нормально для меня в Android.
Просто используйте свойство elevation для получения тени в android. что-то вроде ниже
const Header = () => {
// const { textStyle, viewStyle } = styles;
return (
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>Albums</Text>
</View>
)
}
const styles = {
viewStyle:{
backgroundColor:'#f8f8f8',
justifyContext:'center',
alignItems: 'center',
padding:16,
elevation: 2
}
}
Вы можете использовать мой ответ-родной-простой-теневой вид
Я реализовал CardView для реагирования на нативные с возвышением, которые поддерживают Android (все версии) и iOS. Дайте мне знать, это поможет вам или нет. https://github.com/Kishanjvaghela/react-native-cardview
import CardView from 'react-native-cardview'
<CardView
cardElevation={2}
cardMaxElevation={2}
cornerRadius={5}>
<Text>
Elevation 0
</Text>
</CardView>
Короче говоря, вы не можете сделать это в Android, потому что, если вы видите документы только о тени Поддержка IOS см. Документ
Наилучший вариант, который вы можете установить, - сторонняя реакция-нативная тень.
Также я хотел бы добавить, что если кто-то пытается применить тень в компоненте TouchableHighlight, у которого дочерний элемент имеет borderRadius, родительскому элементу (TouchableHighlight) также необходимо установить радиус, чтобы работа по повышению высоты работала в Android.
Чтобы применить тени в Android.. эта библиотека лучше всего реагирует на родной..
лучшее решение для нанесения тени на андроид
Возвышение по- прежнему не работает в Экспо v30 && React-native v0.55.4. Я попробовал все ответы здесь.
Кроме того, не пытайтесь реагировать на родную тень - их рендеринг теней ужасен. Итак, я продолжаю исследование.
Установите elevation: 3 и вы должны увидеть тень внизу компонента без сторонней библиотеки. По крайней мере, в 0,57,4 руб.
У меня была та же проблема тени/высоты не отображается на Android с возвышением: 2. Затем я заметил, что элемент view имеет ширину дурака, поэтому я добавил margin: 2 к элементу view, и высота появилась правильно.
Стиль:
margin: 2,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2
Android: 
iOS: 
Основываясь на ответах, приведенных здесь, и на тексте, который я нашел в github (Reaction-native-shadow), я провел несколько тестов и подумал, что некоторые люди могут найти следующее полезным.
import React, { Component } from 'react';
import { View, TouchableHighlight, Text } from 'react-native';
import { BoxShadow } from 'react-native-shadow'
export default class ShadowsTest extends Component {
render() {
const shadowOpt = {
width: 100,
height: 100,
color: "#000",
border: 2,
radius: 50,
opacity: 0.8,
x: 3,
y: 3,
//style: { marginVertical: 5 }
}
return (
<View style={{ flex: 1 }}>
<Header
text={"Shadows Test"} />
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 0.8,
borderColor: '#000',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden" }}>
<Text style={{ textAlign: 'center' }}>
0: plain border
</Text>
</TouchableHighlight>
</View>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<BoxShadow setting={ shadowOpt }>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden" }}>
<Text style={{ textAlign: 'center' }}>
1: RN shadow package
</Text>
</TouchableHighlight>
</BoxShadow>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
shadowOffset: { width: 15, height: 15 },
shadowColor: "black",
shadowOpacity: 0.9,
shadowRadius: 10,
}}>
<Text style={{ textAlign: 'center' }}>
2: vanilla RN: shadow (may work on iOS)
</Text>
</TouchableHighlight>
</View>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 15,
}}>
<Text style={{ textAlign: 'center' }}>
3: vanilla RN: elevation only (15)
</Text>
</TouchableHighlight>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center', marginBottom: 30 }}>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 5,
}}>
<Text style={{ textAlign: 'center' }}>
4: vanilla RN: elevation only (5)
</Text>
</TouchableHighlight>
</View>
<View style={{ margin: 10, alignItems: 'center',
justifyContent: 'center' }}>
<TouchableHighlight style={{
position: 'relative',
width: 100,
height: 100,
backgroundColor: "#fff",
borderRadius: 50,
borderWidth: 1,
borderColor: '#aaa',
// marginVertical:5,
alignItems: 'center',
justifyContent: 'center',
overflow: "hidden",
elevation: 50,
}}>
<Text style={{ textAlign: 'center' }}>
5: vanilla RN: elevation only (50)
</Text>
</TouchableHighlight>
</View>
</View>
</View>
)
}
}
По некоторым причинам это сработало только для меня, добавив borderColor: 'transparent' (или любой другой цвет). Мой стиль вывода выглядит так:
{
borderColor: "transparent", // Required to show shadows on Android for some reason !?!?
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.3,
shadowRadius: 5,
elevation: 15,
}
Свойство стиля elevation в Android не работает, если для элемента не было указано backgroundColor.
Android - свойство стиля высот не работает без backgroundColor
Пример:
{
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2},
shadowRadius: 10,
elevation: 3,
backgroundColor: 'white'
}