React Nativeでボックスシャドウを使用したUIを作成する

Question

React NativeでUIを作成しようとしていますが、UIには外側の影付きのボックスが含まれています。私がそれをやった画像を使用していますが、それを行う適切な方法はありますか？

画像の添付

Answer 1

IOSとAndroidでは異なるスタイルの小道具を使用する必要があります。

Android

Androidでは非常にシンプルで、elevationスタイルの小道具を使用するだけです（ docs を参照）。例：

boxWithShadow: {
    elevation: 5
}

iOS

IOSでは、より柔軟に、Shadowプロップを使用します（ docs を参照）。例：

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

概要

要約すると、両方のプラットフォームのボックスシャドウを取得するには、スタイルプロップの両方のセットを使用します。

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}

注意：iOSでoverflow: 'hidden';を使用しないでくださいこのプロパティによってすべての影が消えます。

Answer 2

ねえ、今すぐ完了！

const styles = StyleSheet.create({
    shadow: {  
        borderColor:'yourchoice', // if you need 
        borderWidth:1,
        overflow: 'hidden',
        shadowColor: 'yourchoice',
        shadowRadius: 10,
        shadowOpacity: 1,
    }
});

影の小道具はIOSでのみ使用できることに注意してください。