css React Native中的提升

e1xvtsh3 于 2023-01-22 发布在 React

关注(0)|答案(5)|浏览(123)

这是我在React-Native屏幕中定义的样式。我使用了elevation属性来实现一个方框阴影。但是它不能正常工作。

const styles = StyleSheet.create({
scrollContainer: {
    flex: 1,
},
container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 2
},
box: {
    margin: 8,
    width: Dimensions.get('window').width / 2 - 18,
    height: Dimensions.get('window').width / 2 - 18,
    justifyContent: "center",
    alignItems: "center",
    borderStyle: 'dashed',
    borderLeftWidth: 1,
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderTopColor: 'black',
    borderBottomEndRadius : 8,
    borderTopStartRadius: 8,
    borderTopEndRadius: 8,
    borderBottomStartRadius: 8,
    borderBottomLeftRadius:8,
    borderBottomRightRadius:8,
    elevation: 5
},
navBar:{
    backgroundColor: "#000",
}
});

我也尝试过使用盒影，但同样的问题出现。

css

来源：https://stackoverflow.com/questions/53647304/elevation-in-react-native

5条答案

按热度按时间

gfttwv5a1#

尝试将以下属性添加到styles.box。您可以更改这些值以获得更好的结果。

// ...
box: {
  // ...
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.5,
  shadowRadius: 2,
  elevation: 2,
},
// ...

赞(0）回复(0）举报 2023-01-22

cidc1ykv2#

你可以使用下面的代码

height: 150,
          width: '100%',
          backgroundColor: 'white',
          elevation: 5,
          shadowColor: '#000',
          shadowOffset: {width: 0, height: 0},
          shadowOpacity: 0.1,
          shadowRadius: 5,

赞(0）回复(0）举报 2023-01-22

6l7fqoea3#

经过很少的调查，我找到了有效的解决方案，就在这里。在github issue上对这个问题有广泛的讨论。

box: {
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 2,
}

而不是只使用海拔属性。此外，请确保您给予适当的边距框适当的间距。我是缺乏在我的情况下，保证金。希望这是有用的发现，以帮助。

赞(0）回复(0）举报 2023-01-22

b1zrtrql4#

您可以在视图中添加此样式

headerstyle:{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 2,
    alignSelf: 'stretch'
},

赞(0）回复(0）举报 2023-01-22

brtdzjyr5#

chip: {
    padding: 10,
    height: 40,
    shadowColor: 'black',
    elevation: 3,
    borderRadius: 5,
    backgroundColor: '#fff'
  }

赞(0）回复(0）举报 2023-01-22

我来回答

css React Native中的提升

5条答案

相关问题

热门标签

最新问答