te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>React Native: touchable opacity shadow cropped on each side - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>React Native: touchable opacity shadow cropped on each side - Stack Overflow

    React Native: touchable opacity shadow cropped on each side - Stack Overflow

    programmeradmin4浏览0评论

    Good morning everyone, I have a problem with shadows on a TouchableOpacity with rounded edges.

    I'll insert the code and the result I got

    <SafeAreaView>
  <ScrollView contentContainerStyle={{flexGrow: 1}}>
    <View style={{padding: 20}}>
      <TouchableOpacity
        style={{
          backgroundColor: theme.colors.gold,
          width: 150,
          height: 150,
          borderRadius: 100,
          elevation: 5,
        }}
      />
    </View>
  </ScrollView>
</SafeAreaView>

    I would expect the shadow to be naturally along the circumference, but in addition to having a different rounding, it is also cut on all four sides.

    Thank a lot for helping me

    Good morning everyone, I have a problem with shadows on a TouchableOpacity with rounded edges.

    I'll insert the code and the result I got

    <SafeAreaView>
  <ScrollView contentContainerStyle={{flexGrow: 1}}>
    <View style={{padding: 20}}>
      <TouchableOpacity
        style={{
          backgroundColor: theme.colors.gold,
          width: 150,
          height: 150,
          borderRadius: 100,
          elevation: 5,
        }}
      />
    </View>
  </ScrollView>
</SafeAreaView>

    I would expect the shadow to be naturally along the circumference, but in addition to having a different rounding, it is also cut on all four sides.

    Thank a lot for helping me

    • react-native
    • shadow
    • border-radius
    Share Improve this question asked 2 days ago Luca RomanoLuca Romano 1187 bronze badges
    Add a comment  | 

    1 Answer 1

    Reset to default -2

    It looks like you’re running into a common issue where the shadow (especially on Android) doesn’t appear to match the circular shape of your TouchableOpacity, and also seems to be clipped or cut off. There are a few things you can try:

    Ensure Proper Shadow Props (Especially on iOS)

    On iOS, the elevation style alone won’t display shadows. You need to use the following shadow props in your style:

    shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 3.84,

    These properties work together to produce a smooth shadow. On iOS, elevation does nothing, so it’s important to include these if you want consistent shadows across platforms.

    Double Check Your borderRadius

    To make a perfect circle with width 150 and height 150, your borderRadius should be half of that dimension (i.e., borderRadius: 75). Although you used 100 (which is bigger than 75), it might still appear circular, but ensuring it’s exactly half helps avoid any unexpected shape quirks. Example:

    borderRadius: 75,

    Avoid Shadow Clipping by Adjusting Parent Views

    Sometimes, parent views have overflow: 'hidden' or simply aren’t large enough to display the full shadow. Make sure that your parent containers (SafeAreaView, ScrollView, and any wrapping View) do not clip the shadow. You can add some extra padding or margin around the TouchableOpacity if the shadow is still getting cut off. For instance:

    <View style={{
  padding: 20,
  // Make sure no overflow clipping
  overflow: 'visible'
}}>
  ...
</View>

    Combine Both Android and iOS Shadow Approaches

    If you want your component to look the same on both platforms, you’ll need both elevation (for Android) and the shadow properties (for iOS). A combined style might look like:

    style={{
  backgroundColor: theme.colors.gold,
  width: 150,
  height: 150,
  borderRadius: 75, // half of width/height
  elevation: 5,     // Android shadow
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.3,
  shadowRadius: 3.84,
}}

    Test on Real Devices and Emulators

    Shadows can look different on various devices. It’s always good to test on an actual Android device and an iOS simulator (or device) to make sure the appearance is consistent with what you expect. In summary, use borderRadius equal to half of your width/height, combine the iOS shadow props with the Android elevation style, and ensure your parent containers aren’t clipping the shadow. This should give you a nice, circular shadow that wraps smoothly around your TouchableOpacity without getting cut off.

    Hope this helps you achieve the perfect circular button with a nice shadow!

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论