web-dev-qa-db-ja.com

反応ネイティブの下部にのみ標高シャドウを設定する方法

ビューの下部に影を付けようとしていますが、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

IOS/Android

androidreact-nativereact-native-androidandroid-stylesshadow
14
tinmarfrutos

ライブラリをインストールしなくても、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>

結果： result

使用できるカスタムコンポーネントを次に示します。

import React from 'react'
import { View, StyleSheet } 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: PropTypes.object,
};

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>

あなたはあなたの影に応じてパディングを調整することができます

4
Abdelrhman Elmahdy

残念ながらRNはデフォルトではサポートしていません。ブローリンクをチェックしてください https://ethercreative.github.io/react-native-shadow-generator/

this のようなnpmパッケージを使用できます

3
Maleking