[英]How to add my props to the Stack Screens in the react-native app
[英]React-native shadow not appearing in the app screens
我正在開發 React-native App。 早些時候陰影工作正常,但現在在整個應用程序中,陰影不可見。
我知道 StackOverflow 上有很多問題和解決方案。 我已經嘗試了一切,但對我沒有任何作用。
我試圖像這樣添加backgroundColor
顏色:
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
}
我還刪除了overflow: 'hidden'
;
但是對代碼沒有影響。
我正在為 android 使用elevation
。 它不適用於任何應用程序屏幕。 如果有人面臨同樣的問題,請分享解決方案。 TIA
這對我有用
{
paddingVertical: 12,
marginTop: 20,
marginBottom: 70,
width: '100%',
borderColor : 'gray',
borderWidth : 0.1,
paddingHorizontal : 12,
backgroundColor : '#fff',
margin:8,
width:'60%',
alignItems : 'center',
shadowOpacity: 0.25,
shadowRadius: 2,
shadowOffset: {
width: 0,
height: 2,
},
shadowColor: '#000000',
elevation: 4,
}
請參見下面的示例,我為 ios 和 android 創建了一個 Shadow box。 我想這會幫助你。
import React, { Component } from 'react';
import { View, Text, Dimensions, Platform } from 'react-native';
const screenHieght = Dimensions.get('window').height;
class ShadowBox extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.innerView}>
<View style={styles.outer}>
<Text style={{ textAlign: 'center' }}>card </Text>
</View>
<View style={styles.outer}>
<Text style={{ textAlign: 'center' }}>card </Text>
</View>
</View>
</View>
);
}
}
const styles = {
innerView: {
borderWidth: 1,
backgroundColor: Platform.OS === 'ios' ? '#fff' : null,
borderColor: '#ddd',
shadowColor: Platform.OS === 'ios' ? 'green' : '#fff',
shadowOffset: {
width: Platform.OS === 'ios' ? 3 : 0,
height: Platform.OS === 'ios' ? 3 : 2,
},
shadowOpacity: Platform.OS === 'ios' ? 1 : 0.8,
shadowRadius: Platform.OS === 'ios' ? null : 40,
elevation: Platform.OS === 'ios' ? null : 4,
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 300,
},
outer: {
margin: 10,
padding: 10,
alignSelf: 'center',
borderWidth: 1,
width: '80%',
overflow: 'hidden',
},
};
export default ShadowBox;
如有疑問,請放心。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.