React Native Shadow Styles在View组件上不起作用

Question

我想知道是否有人知道如何在React Native View组件上使阴影样式起作用。我清理了所有网络，找不到任何解决方案。我的代码如下所示：

//Stylesheet code:
...
  profileImage: {
      width: 170,
      height: 170,
      overflow: "hidden",
      marginLeft: (Dimensions.get('window').width/2) - 85,
      marginTop: 30,
      borderRadius: 170,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.8,
      shadowRadius: 2,
      elevation: 5
  },
...
//View component:
<View style={styles.profileImage}>
      <Image source={require("../assets/images/temporaryProfilePicture.jpg")} style={styles.image} resizeMode="cover"></Image>
</View>
...

任何人和所有帮助将不胜感激。预先谢谢你！

Answer 1

这是我用代码实现的并链接到它的内容：expo-snack：

import * as React from 'react';
import { Text, View, StyleSheet,Dimensions ,Image} from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
       <Image  source={{uri:'https://source.unsplash.com/random'}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
     width: 170,
      height: 170,
      overflow: "hidden",
      marginLeft: (Dimensions.get('window').width/2) - 85,
      marginTop: 30,
      borderRadius: 170,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.8,
      shadowRadius: 2,
      elevation: 5
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});