React Native中的阴影不起作用

Question

常量样式= StyleSheet.create（{   容器： {     backgroundColor：'＃F8F8F8'，     alignItems：'中心'，     justifyContent：'center'，     高度：60，     paddingTop：20，     borderBottomWidth：0，     shadowColor：'＃000000'，     shadowOffset：{       宽度：0，       高度：5     }，     shadowRadius：10，     shadowOpacity：0.5，     海拔：3，     位置：“相对”，   }， }）;

Answer 1

您可以使用它为iOS和Android生成阴影 React native shadow generator

Answer 2

事实上，我尝试了一下，并且在我已经创建的TouchableOpacity Text上运行良好：

def get_data():
    response = 
    requests.post('http://localhost:3000/api/main/data_to_server').json()
    print(response)

风格：

<TouchableOpacity style={styles.TestView} onPress={()=> { this.doAction; }}
    >
    <Text style={[styles.normalText, styles.headerText, { color: colors.lighterPrimaryColor }]}>
        TEST
    </Text>
</TouchableOpacity>

这是我的android设备上的结果：

如果要获得更好的结果，可以使用react-native-cardview，也可以使用UI组件库中的卡，例如 privateMessagesView: { flexDirection: 'row', backgroundColor: '#F8F8F8', alignItems: 'center', justifyContent: 'center', height: 60, paddingTop: 20, borderBottomWidth: 0, shadowColor: '#000000', shadowOffset: { width: 0, height: 5 }, shadowRadius: 10, shadowOpacity: 0.5, elevation: 3, position: 'relative', }, ，native-base ..etc。如果使用的是卡。 / p>

Answer 3

尝试一下（为我工作）：

justifyContent: 'center',
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: "row",
marginTop: 15,
height: 35,
width: 170,
marginHorizontal: 20,
marginBottom : 10,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 5, 
elevation: 1.5,
borderColor: '#e6e6e6'

Answer 4

React Native的阴影

import {Platform} from "react-native";

在视图中添加以下样式

{
  backgroundColor: '#fff',
    ...Platform.select({
      android: {
        elevation: 2,
      },
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,
      },
    }),
}