React-native shadow not appearing

问题

I'm trying to get a shadow below my views, and from what I found online it should be quite simple:

    shadowOffset: { width: 10, height: 10 },
    shadowColor: 'black',
    shadowOpacity: 1.0,

but the problem is that the shadow is not appearing at all.

Here's my components

      <View style={styles.shadow}>
        <View style={styles.box} >
          <View style={styles.ListComponent}>
            <Text style={styles.itemText}>Livestream</Text>
          </View>
        </View>
      </View>

and in my StyleSheet:

const styles = StyleSheet.create({
   shadow: {
   shadowOffset: { width: 10, height: 10 },
   shadowColor: 'black',
   shadowOpacity: 1.0
},

Any reason for this or is there something I've missed?

回答1:

Is the shadow working on IOs ? Android and IOS work ≠ in React-Native. For android, it works with elevation.

const styles = StyleSheet.create({
shadow: {
  shadowOffset: { width: 10, height: 10 },
  shadowColor: 'black',
  shadowOpacity: 1,
  elevation: 3,
  // background color must be set
  backgroundColor : "#0000" // invisible color
}

Otherwise, try to set a background color to your shadow component :)

回答2:

For iOS, raise the zIndex of your outer <View>

const styles = StyleSheet.create({  
 shadow: {  
  shadowOffset: { width: 10, height: 10 },  
  shadowColor: 'black',  
  shadowOpacity: 1,  
  elevation: 3,  
  zIndex:999,  
}

回答3:

As some of the comments have pointed out, you're in a bit of a bind if you need overflow: 'hidden'. (Such as for a card with rounded edges and a full-bleed image.)

A handy approach is to add shadow to a parent container with no backgroundColor set. That is due to this issue https://github.com/facebook/react-native/issues/10049#issuecomment-366426897 which causes children to inherit the shadow of a parent view without a background. (It can look pretty weird when it affects multiple children.)

Add a parent container with a shadow & no backgroundColor set.
Have a single child view with a backgroundColor.

    <View // Parent
      style={{
        flex: 1,
        // No backgroundColor
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 1},
        shadowOpacity: 0.8,
        shadowRadius: 2
      }}
    >
      <View // Card
        style={{
          flex: 1,
          borderRadius: 10,
          // To round image corners
          overflow: 'hidden',
          borderColor: '#999',
          borderWidth: 0.5,
          // https://github.com/facebook/react-native/issues/10049#issuecomment-366426897
          backgroundColor: '#FFF',
          // Android shadow
          elevation: 4
        }}
      >
        <Image // Content
          style={{
            height: '50%',
            width: '100%',
            alignSelf: 'center',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          source={{
            uri: 'https://yourimageurl.com/image.jpg'
          }}
          resizeMode="cover"
        />
      </View>
    </View>

回答4:

I too wanted to have a shadow below my View in my Android app. So the trick I found was:

For IOS:

const styles = StyleSheet.create({
    shadow: {
      shadowOffset: { width: 0, height: 2 },
      shadowColor: '#000',
      shadowOpacity: 0.2
    }
});

And For Android:

const styles = StyleSheet.create({
    shadow: {
        elevation: 5
    }
});

If you're working on UI elements I suggest you have a look at NativeBase site. They have made life easy as far as styling is concerned.

回答5:

Solution for both borderRadius and shadow

        <View style={{backgroundColor: '#000', ...shadow}}>
          <View style={{overflow: "hidden", borderRadius: 10}}>
            <VideoPlayer
                ...
                />
          </View>
        </View>

来源：https://stackoverflow.com/questions/44908580/react-native-shadow-not-appearing

标签

react-native

Shadow