Как визуализировать тень на представлении? Я пробовал много комбинаций shadowColor, shadowOffset, shadowOpacity и shadowRadius, которые, похоже, ничего не делают. Я уверен, что стиль применяется правильно, поскольку другие атрибуты, которые я установил, работают.
Как сделать тень?
Ответ 1
Кажется, это ошибка в React native, что для shadowOpacity
установлен тип CGFloat
вместо float
соответствии с документом CALayer. использовать iPhone 5 симулятор, прежде чем это исправить. (CGFloat
- это float
в старых устройствах.)
Проблема React Native, которая отслеживает это:
Ответ 2
Я использую React-Native 0.40 и ниже код работает для меня как на IOS, так и на Android.
(Только для Android) Устанавливает высоту представления с помощью Android API-интерфейса повышения. Это добавляет тень к элементу и влияет на z-порядок перекрывающихся видов. Поддерживается только в Android 5. 0+, не влияет на более ранние версии.
class MainApp extends Component {
render() {
return (
<View style={styles.container}>
<View elevation={5} style={styles.buttonContainer}>
<Text style={styles.textStyle}>Shadow Applied</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
textStyle: {
color: '#FFFFFF'
},
buttonContainer: {
backgroundColor: '#2E9298',
borderRadius: 10,
padding: 10,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 5,
shadowOpacity: 1.0
}
})
Проверено на iPhone.
редактировать
Комментарий от @James. Благодарю.
Примечание: для тех, кто на Android, backgroundColor имеет решающее значение. Я использовал View как контейнер для другого элемента и не смог получить тень, пока не указал цвет фона.
Ответ 3
Используйте высоту, чтобы реализовать тени на RN Android. Добавлена поддержка # 27
<View elevation={5}>
</View>
Ответ 4
viewStyle : {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
marginBottom: 10,
elevation: 2,
position: 'relative'
},
Использовать marginBottom: 10
Ответ 5
Вы должны указать знак высоты для просмотра
<View elevation={5} style={styles.container}>
<Text>Hello World !</Text>
</View>
можно добавить следующие стили:
const styles = StyleSheet.create({
container:{
padding:20,
backgroundColor:'#d9d9d9',
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
},
})
Ответ 6
panel: {
// ios
backgroundColor: '#03A9F4',
alignItems: 'center',
shadowOffset: {width: 0, height: 13},
shadowOpacity: 0.3,
shadowRadius: 6,
// android (Android +5.0)
elevation: 3,
}
или вы можете использовать Reaction-native-shadow для Android
Ответ 7
Все о полях
это работает в Android, но не проверял его в IOS
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { View, Platform } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
const styles = EStyleSheet.create({
wrapper: {
margin: '-1.4rem'
},
shadow: {
padding: '1.4rem',
margin: '1.4rem',
borderRadius: 4,
borderWidth: 0,
borderColor: 'transparent',
...Platform.select({
ios: {
shadowColor: 'rgba(0,0,0, 0.4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 0.7,
shadowRadius: '1.4rem'
},
android: {
elevation: '1.4rem'
}
})
},
container: {
padding: 10,
margin: '-1.4rem',
borderRadius: 4,
borderWidth: 0,
borderColor: '#Fff',
backgroundColor: '#fff'
}
})
class ShadowWrapper extends PureComponent {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.element)
]).isRequired
}
render () {
return (
View style={styles.wrapper}
View style={styles.shadow}
View style={styles.container}
{this.props.children}
View
View
View
)
}
}
export default ShadowWrapper
Ответ 8
по стилизованному компоненту
const StyledView = styled.View'
border-width: 1;
border-radius: 2;
border-color: #ddd;
border-bottom-width: 0;
shadow-color: #000;
shadow-offset: {width: 0, height: 2};
shadow-opacity: 0.8;
shadow-radius: 2;
elevation: 1;
'
или по стилям
const styles = StyleSheet.create({
containerStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
}
})