preface

Shadow effect is a very common requirement in App. In CSS3, it can be directly implemented by the box-shadow attribute. In RN, it can also be implemented by the following similar code on iOS

// only support iOS shadowColor:'# 999'// set shadowOffset:{width:0,height:0}, // Set shadow offset, this value will set the entire shadow offset,widthYou could view it as x,heightCan be viewed as y, where x is positive to the right and y is positive downward.1,
    shadowRadius: 1.5// Set the shadow blur radius. This value sets the radius of the entire shadow. The default effect is to have shadows all around the ViewCopy the code

However, the above code does not support Android, which can be implemented via elevation attributes on the Android side

// This value is only available on Android5.0// Can not specify the shadow color and offset, can only set the height of the shadow // the shadow effect is mainly at the bottom, the other three sides also have a layer feeling, like the ios four shadow effect is not the same.1.5.Copy the code

If you don’t mind, you can simply merge the attributes of the two platforms and reference them where you need to use them:

ViewShadow :{// This property supports >= Android only5.0
      elevation:1.5,
      shadowColor:gColors.color999,
      shadowOffset:{width:0,height:0},
      shadowOpacity: 1,
      shadowRadius: 1.5,
}


<View style={[{},Styles.viewShadow]}>

</View>

Copy the code

Effect :(there is still a big difference)

iOS:

android:

Specific can view: stackoverflow.com/questions/4…

Choose the library

  • 1.react-native-shadow

This library uses the SVG library React-native-SVG to draw the shadows, so both ends of the shadow are the same.

const shadowOpt = {
	width:100.height:100.color:"# 000".border:2.radius:3.opacity:0.2.x:0.y:3.style: {marginVertical:5}}... render =() = > {
	return (
		<View>
			<Shadow setting={shadowOpt}>
				<View style={{width:100,height:100}}/>
			</Shadow>
		</View>)}Copy the code

As you can see from the code above, the biggest flaw in this library is thatWidth and height must be setWidth is fine, but height is really tricky for adaptive height layout, you have to set a fixed height, I just want to add a shadow, and let me calculate the height

  • 2.react-native-cardview

The library iOS uses the shadow attribute of RN, and Android uses CardView component of the Support library, so android needs to integrate the native code, which is used as follows:

import CardView from 'react-native-cardview'
<CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5} ><Text>
              Elevation 0
          </Text>
</CardView>

Copy the code

Note:

  • 1. It is best to set CardView to a background value, otherwise many of the following warnings will be reported
YellowBox.js:71 (ADVICE) View #257 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.
Copy the code
  • 2. If rounded corners are required, set the parameterscornerRadiusYou don’t need to set the child elementborderRaduis




Regardless of width and height, perfect, let’s see how it works:

iOS:

android:

Well, it’s still a little bit different, but a little bit better than using attributes

conclusion

Name of | | native dependent libraries | | advantages to disadvantages | | — – | — – | — – | — – | — – | | | an RN bring attribute no | | 1 don’t have to integrate any native library. A greater difference between two ends (2) does not support set colors 3. The android client support elevation of only one attribute | | the react – native – shadow | dependence react – native – SVG | 1. On both ends of the effect is almost the same as 2. Support many properties such as color | 1. The width and height must be set | | the react – native – cardview | the library android side is native | 1. Compared with the method of support many properties | 1. Or is there a difference on both ends (better than method 1) |




  • 1. If you don’t need to have the same effect on both ends, and you don’t need to support android devices prior to android5 (which is rare now), you can use RN’s native properties

  • 2. If the effects of both ends are to be exactly the same or the color of the shadow needs to be set, only react-native shadow can be used. The disadvantage is that the height and width must be fixed (this library relies on react-native SVG).

  • 3. Then choose React-native CardView. The effect is similar and both are iOS/ Android native effects.












Ps: If you need the TS definition file of react-native cardview, you can directly copy the TS file in pull61. Although the pull file has been merged, it has not been released to NPM (as of 2019/12/16).

other

RN’s Umeng affiliate statistics, sharing, authorization

Bugly has been fully updated for Android

High-performance Wheel Picker selection component (date, time segment, province and city linkage)

RN handwritten signature

RN Autonavi navigation library

RN implements clearing the local cache

RN implements custom code-push hot updates

RN’s code-push-server management App

RN blog park App