ビューの下部に影を追加しようとしていますが、Android でその方法がわかりません。elevationそれと同時に、上部にも影を付けます。iOS のようにそれを実行する方法はありますか?
これが私のコードです:
export function makeElevation(elevation) {
const iosShadowElevation = {
shadowOpacity: 0.0015 * elevation + 0.18,
shadowRadius: 0.5 * elevation,
shadowOffset: {
height: 0.6 * elevation,
},
};
const androidShadowElevation = {
elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;
}
左: iOS (予定)
右: Android
react-native-linear-gradient編集: 私が見つけた唯一の「偽の」解決策は、代わりにカスタム シャドウを作成することです。
ベストアンサー1
overflow: 'hidden'ライブラリをインストールしなくても、目的の結果を達成するために使用できます。
ビューを親ビューでラップし、親のオーバーフローを非表示に設定し、次のように影を表示する側にのみパディングを適用します。
<View style={{ overflow: 'hidden', paddingBottom: 5 }}>
<View
style={{
backgroundColor: '#fff',
width: 300,
height: 60,
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 5,
}}
/>
</View>
結果：
使用できるカスタム コンポーネントは次のとおりです。
import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'
const SingleSidedShadowBox = ({ children, style }) => (
<View style={[ styles.container, style ]}>
{ children }
</View>
);
const styles = StyleSheet.create({
container:{
overflow: 'hidden',
paddingBottom: 5,
}
});
SingleSidedShadowBox.propTypes = {
children: PropTypes.element,
style: ViewPropTypes.style,
};
export default SingleSidedShadowBox;
例：
<SingleSidedShadowBox style={{width: '90%', height: 40}}>
<View style={{
backgroundColor: '#fff',
width: '100%',
height: '100%',
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 5,
}} />
</SingleSidedShadowBox>
影に応じてパディングを調整できます