React-native-maps 标注周围的阴影

发布于 2025-01-10 05:55:54 字数 846 浏览 3 评论 0原文

我正在尝试在标记的标注上添加阴影。我当前实现的方法有我想要的阴影，但它不遵循视图的 borderRadius 。

我认为为具有透明背景的阴影创建一个单独的视图可以解决问题，但事实并非如此。我在下面包含了一些代码以及此处的小吃示例，它重现了我的问题准确。作为 IOS 运行。

<Callout tooltip style={{ padding: 3 }}>
  <View style={styles.bubbleShadow}>
    <View style={styles.bubble}>
      <Text styles={{ fontSize: 16, marginBottom: 5 }}>{marker.name}</Text>
    </View>
  </View>
</Callout>


 bubble: {
    height: scale(100),
    width: scale(200),
    borderRadius: 10,
    backgroundColor: 'white',
    overflow:'hidden'
    
  },
  bubbleShadow:{
    borderRadius: 10,
    backgroundColor: 'transparent',
    shadowColor: '#000',
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 1,
  },

原文

I am trying to add a shadow on a callout for a marker. The current way I have implemented has the shadow I want but it does not follow the borderRadius of the View.

I thought creating a separate view for the shadow with a transparent background would do the trick but it didn't. I have included some code below as a well as a snack example here that reproduces my issue exactly. Run as IOS.

<Callout tooltip style={{ padding: 3 }}>
  <View style={styles.bubbleShadow}>
    <View style={styles.bubble}>
      <Text styles={{ fontSize: 16, marginBottom: 5 }}>{marker.name}</Text>
    </View>
  </View>
</Callout>


 bubble: {
    height: scale(100),
    width: scale(200),
    borderRadius: 10,
    backgroundColor: 'white',
    overflow:'hidden'
    
  },
  bubbleShadow:{
    borderRadius: 10,
    backgroundColor: 'transparent',
    shadowColor: '#000',
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 1,
  },

分享到QQ

分享到微博