如何制作倒置的边框半径(反应本机)?

2023-12-29

我怎样才能在react-native中做出这样的形状?

在CSS中,解决方案之一是使用-webkit-mask-image,但我不知道如何在react-native中做到这一点。

倒边界半径 https://i.stack.imgur.com/YjP42.png


它实际上是关于CSS,而不是react-native。 :)。

下面是我的技巧,你可以调整精确的值。

.square-wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.square {
  height: 100%;
  width: 100%;
  background: grey;
  border: 2px solid red;
  border-radius: 10px;
  box-sizing: border-box;
}

.square:after {
  position: absolute;
  display: block;
  content: '';
  right: -50%;
  bottom: -50%;
  height: 100%;
  width: 100%;
  background: white;
  border-top: 2px solid red;
  border-left: 2px solid red;
  border-radius: 50%;
}
<div class="square-wrapper">
  <div class="square"></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何制作倒置的边框半径(反应本机)? 的相关文章

  • 我在 Facebook 上的“access_token”是“不正确的值”

    我正在使用 django rest auth 它是 Django all auth 的 API 扩展 我正在构建一个可以使用 Facebook 令牌注册 登录的移动应用程序 网址 http localhost 8000 rest auth
  • 如何在React Native的MapView中设置标记

    我想在React Native中的MapView上设置一个标记 但是通过官方文档找不到任何信息MapView https facebook github io react native docs mapview html content 如
  • 公式无效:/usr/local/Homebrew/Library/Taps/facebook/homebrew-fb/buck.rb

    我运行了brew 命令来安装Facebook homebrew tap 我有一个 M1 Apple Silicon 芯片组 并使用 Rosetta 下的终端来执行 brew 命令 brew tap facebook fb 我收到错误消息 g
  • 找不到 -lDoubleConversion 的库

    我尝试在 XCode 上构建 但是ld library not found for lDoubleConversion发生错误 我可以建造react native run ios 这可行 但 XCode 无法构建 ld 警告 找不到选项 L
  • 视图有阴影集但无法有效计算阴影

    我收到此错误消息 gt View 54 of type RCTView has a shadow set but cannot calculate shadow efficiently 错误信息很清楚 只是不知道是哪个视图 54 有没有办法
  • CSS flexbox 内的 Angular CDK 拖放问题

    我在使用 Angular CDK 中的拖放模块时遇到了问题 我在容器 div 中使用它 该容器具有 除其他外 以下 CSS 属性 display flex flex wrap wrap The flex wrap属性在这里 以便如果包含的可
  • 无法识别的字体系列离子图标

    我按照中的设置说明进行操作NativeBase 文档 http nativebase io documentation然后跑了rnpm link 我收到此错误 无法识别的字体系列离子图标 https i stack imgur com Dj
  • Expo 应用程序“您的应用程序正在使用广告标识符 (IDFA)”

    我正在尝试将应用程序上传到应用程序商店 每次我上传二进制文件时 苹果都会坚持认为我的应用程序正在使用广告 而我从未实现过这样的事情 我查看了文档并删除了涉及的所有代码ASIdentifier and adIdentifier我不太确定我错过
  • React Native 无法访问 Cloud Firestore 后端

    我之前使用的是 firebase 实时数据库 但现在想切换到 Cloud Firestore 但即使经过身份验证 也会收到以下错误 我目前正在使用 Android Simulator 尝试禁用我的实时数据库 但找不到解决方案 Firebas
  • 将 babel polyfill 添加到 React Native 项目

    我在 Android 上遇到问题 得到这个错误 undefined 不是一个函数 评估 iterator2typeof Symbol function Symbol iterator iterator 我觉得和for of es6的使用有关
  • 在 React Native (iOS) 中支持动态类型

    有谁知道如何在 React Native 中实现对动态类型的支持 理想情况下 我们希望监听何时有人更改了系统字体的大小 并执行某种类型的回调 或者更好的是 阻止在某些组件上实现字体缩放 好吧 事实证明你可以申请 allowFontScali
  • React Native TextInput 在 Android 上打开时自动关闭

    我切换了笔记本电脑并克隆了我的项目的存储库 进行了快速的纱线安装 看起来它与主分支上的有很大的不同 但我没有打扰 因为也许这只是因为不同的节点版本 现在 每次我单击一个 TextInput 时 键盘都会立即打开和关闭 仅在 Android
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • 在 React Native 和 Expo 中加密敏感数据

    我正在使用 React Native 开发一个移动应用程序Expo https expo io 提供安全解决方案 项目所有者希望在应用程序中存储敏感的授权密钥 用于与 REST 服务器通信并访问安全数据 他要求这些密钥至少是加密的 并且尽可
  • React-native:远程调试器停止工作

    我总是在我的应用程序和真实设备上使用调试器 但今天它突然停止工作了 打开它时 我的终端中出现此错误 Error Unable to resolve module debugger ui debuggerWorker cff11639 js
  • npm 错误:找不到模块“core-util-is”

    当我跑步时 npm v npm install and npm install save react native voice 出现此错误 module js 549 throw err Error Cannot find module c
  • 从“react-native-vector-icons/Ionicons”导入图标

    我可以在同一屏幕上导入react native vector icons font awesome 和react native vector icons Ionicons 吗 基本上我想在同一屏幕上为不同的图标使用 font awesome
  • React-native 清单合并失败

    突然 当我在 Android 手机中编译我的项目时 我在合并清单时收到此错误 任务 app processDebugManifest 执行失败 清单合并失败 属性 application appComponentFactory value
  • 如何在android上使用离线包来反应本机项目?

    如何在 Android 上使用离线捆绑包 我没有看到关于在 android 上使用离线捆绑包的文档 我尝试取消注释 build gradle 中的代码 project ext react the name of the generated
  • 可能未处理的 Promise 拒绝/错误:请求失败,状态代码 400

    我知道对此有一些答案 并且我全部阅读了它们 但他们都没有帮助 所以这是我的错误消息 这是我的行动 export function registerUser data const request axios method POST url R

随机推荐