Я пытаюсь получить тень ниже моих взглядов, и из того, что я нашел в Интернете, должно быть довольно просто:
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1.0,
но проблема в том, что тень вообще не появляется.
Здесь мои компоненты
<View style={styles.shadow}>
<View style={styles.box} >
<View style={styles.ListComponent}>
<Text style={styles.itemText}>Livestream</Text>
</View>
</View>
</View>
и в моем StyleSheet:
const styles = StyleSheet.create({
shadow: {
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1.0
},
Любая причина для этого или есть что-то, что я пропустил?
Работает ли тень на МО? Android и IOS работают в React-Native. Для android он работает с высотой.
const styles = StyleSheet.create({
shadow: {
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1,
elevation: 3,
// background color must be set
backgroundColor : "#0000" // invisible color
}
В противном случае попробуйте установить цвет фона для вашего теневого компонента :)
Для iOS поднимите zIndex внешнего <View>
const styles = StyleSheet.create({
shadow: {
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1,
elevation: 3,
zIndex:999,
}
Я тоже хотел, чтобы в моем приложении для Android была тень под моим видом. Итак, хитрость, которую я нашел, была:
Для IOS:
const styles = StyleSheet.create({
shadow: {
shadowOffset: { width: 0, height: 2 },
shadowColor: '#000',
shadowOpacity: 0.2
}
});
И для Android:
const styles = StyleSheet.create({
shadow: {
elevation: 5
}
});
Если вы работаете над элементами пользовательского интерфейса, я предлагаю вам взглянуть на сайт NativeBase. Они облегчили жизнь, когда дело касается стиля.
Вы можете использовать реакцию-родной-простой-теневой вид