如何在Android的React Native中設置陰影？

你好，我想爲我的晶圓廠設置一個陰影，但我的嘗試失敗了，至今我嘗試設置陰影道具，但這僅適用於ios，因此我嘗試使用海拔屬性進行遊戲，但看起來不正確。如何在Android的React Native中設置陰影？

這裏就是我試圖

<View style={{width: 56, height: 56, elevation: 2, borderRadius: 28, marginBottom: 3, backgroundColor: 'rgba(231,76,60,1)'}}></View>

我需要實現

來源

2016-12-25 Ibrahim Ahmed

UPDATE

添加CSS屬性elevation: 1呈現陰影在Android中沒有安裝任何第三方庫什麼。查看其他答案。

一種方式來獲得Android的陰影是從自述安裝react-native-shadow

例子：

import React, {Component} from 'react' import { 
    StyleSheet, 
    View, 
    Text, 
    ScrollView, 
    Image, 
    TouchableHighlight } from 'react-native' 

import {BoxShadow} from 'react-native-shadow' 

export default class VideoCell extends Component { 
    render =() => { 
     const shadowOpt = { 
      width:160, 
      height:170, 
      color:"#000", 
      border:2, 
      radius:3, 
      opacity:0.2, 
      x:0, 
      y:3, 
      style:{marginVertical:5} 
     } 

     return (
      <BoxShadow setting={shadowOpt}> 
       <TouchableHighlight style={{ 
        position:"relative", 
        width: 160, 
        height: 170, 
        backgroundColor: "#fff", 
        borderRadius:3, 
        // marginVertical:5, 
        overflow:"hidden"}}> 
        ………………………… 
       </TouchableHighlight> 
      </BoxShadow> 
     ) 
    } 
}

來源

2017-01-04 06:40:03 FuzzyTree

添加CSS屬性'高度：1'在Android中呈現陰影，無需安裝任何第三方庫。我使用React Native 0.52 – Guy

，而無需使用第三方庫的另一種解決方案是使用elevation。

從反應原生文件中拉出。 https://facebook.github.io/react-native/docs/view.html

（Android的只）設置的圖的仰角，使用Android的底層高程API。這會爲項目添加陰影，並且會影響重疊視圖的z順序。僅在Android 5.0以上版本支持，對早期版本沒有影響。

elevation將進入style屬性，它可以像這樣實現。

<View style={{ elevation: 2 }}> 
    {children} 
</View>

海拔越高，陰影越大。希望這可以幫助！

來源

2017-01-06 21:34:57 Ajackster

測試了它爲什麼在2個大括號內寫入了高程屬性？ – divine

@divine @divine外括號是用於JS插值，內部是用於對象 –

這隻在視圖的底部做一個陰影，它不允許你在另一側做陰影 – Erich

您可以嘗試

//ios  
shadowOpacity: 0.3, 
shadowRadius: 3, 
shadowOffset: { 
    height: 0, 
    width: 0 
}, 
//android 
elevation: 1

來源

2017-08-02 02:26:46

海拔不會爲Android創建足夠大或可配置的陰影 - react-native-shadow看起來像是最佳選擇 – evanjmg

只要使用「海拔」屬性來獲取陰影機器人。像下面的東西

const Header =() => { 
    // const { textStyle, viewStyle } = styles; 
    return (
     <View style={styles.viewStyle}>  
     <Text style={styles.textStyle}>Albums</Text> 
     </View> 
    ) 
} 


const styles = { 
    viewStyle:{ 
     backgroundColor:'#f8f8f8', 
     justifyContext:'center', 
     alignItems: 'center', 
     padding:16, 
     elevation: 2 
    } 
}

來源

2017-11-11 17:51:25 SameerShaik

如何在Android的React Native中設置陰影？

回答

相關問題