web-dev-qa-db-ja.com

Reactネイティブの標高

これが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",
}
});

ボックスシャドウも試しましたが、同じ問題があります。

react-nativeborderelevation
1
Navin D. Shah

次のプロパティをstyles.boxに追加してみてください。より良い結果を得るために値を変更することができます。

   shadowColor: '#000',
   shadowOffset: { width: 0, height: 2 },
   shadowOpacity: 0.5,
   shadowRadius: 2,
   elevation: 2,
7
Helmer Barcos

Githubでこの問題について幅広い議論があります。 ディスカッション に進むか、解決策を試すことができます

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

むしろ、標高を適切に使用するだけです。

0
Kiran Maniya