首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在使用react-native-svg的iOS上,onPress不能在SVG路径上工作

是因为SVG路径(Path)本身不支持触摸事件。SVG路径只是描述了图形的形状,而不是一个可交互的元素。

要在SVG路径上实现触摸事件,可以通过将SVG路径包装在一个可交互的元素上来实现,例如在react-native中可以使用TouchableOpacity组件或TouchableWithoutFeedback组件来包裹SVG路径。

TouchableOpacity组件可以为其子组件提供触摸事件,可以通过设置onPress或onPressIn等属性来实现对触摸事件的响应。例如:

代码语言:txt
复制
import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';

const MyComponent = () => {
  const handlePress = () => {
    // 处理触摸事件
  };

  return (
    <TouchableOpacity onPress={handlePress}>
      <Svg width="100" height="100">
        <Path d="M0 0 L50 0 L50 50 Z" />
      </Svg>
    </TouchableOpacity>
  );
};

export default MyComponent;

TouchableWithoutFeedback组件也可以实现类似的效果,但它没有任何视觉反馈。如果需要实现点击时的视觉反馈效果,可以使用TouchableOpacity。

以上是在react-native中实现在SVG路径上的触摸事件的方法,对于具体的SVG路径绘制、样式设置等相关内容,可以参考react-native-svg的官方文档:react-native-svg

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS开发之使用Storyboard预览UI不同屏幕运行效果

公司做项目一直使用Storyboard,虽然有时会遇到团队合作Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算。...之前博客中也提到过,团队合作使用Storyboard时,避免冲突有效解决方法是负责UI开发同事最好每人维护一个Storyboard, 公用组件使用轻量级xib或者纯代码来实现。...言归正传,接下来就介绍一下如何使用Storyboard来预览UI不同那个分辨率屏幕运行效果,这就很好避免了每次调整约束都要Run一下才能看到不同平面上运行效果,今天博客就来详述一下如何使用Storyboard...一、创建工程添加测试使用UIImageView     创建一个测试工程,ViewController添加4个不同尺寸UIImageView, 并且添加上不同约束,最后添加上不同文艺小清新图片...~,愿大家天天快乐,工作开心呢!

2.3K80

🧭 React Native 版本升级指南

iOS目录变化 2️⃣ 修改 Header Search Path 一步修改了 React Native 项目的引用方式,但还有一个问题,那就是寻址头文件路径并没有修改过来,我们可以观察下面两张图:...解决方法是删除原来 Header Search Path 内容,手动把新路径添加进去。 迁移前 迁移后 上面两步做完后可以尝试 build 一下项目,大概率你会发现还是 build 起来。...AndroidX 概览 迁移到 AndroidX Android AndroidX 迁移 迁移工作主要是修改 import 路径工作量可能有些大,但心理负担较小,本质就是改了个名字,问题不大。...= '你项目' - include ':react-native-svg' - project(':react-native-svg').projectDir = new File(rootProject.projectDir.../node_modules/react-native-svg/android') + apply from: file("..

4.2K20

🤯 没 2 年 React Native 开发经验,你都遇不到这些坑

1.AppState AppState 这个 API 实际开发中主要是监听 APP 前后台切换,这个 API iOS 上表现符合语义,但是 Android 就有问题了,因为 AppState...还有一些非官方但很好用组件,例如 react-native-svg、react-native-camera 等等。...虽然理论一套一套,但是现实开发中就会发现,elevation 搞出来阴影非常丑,和 iOS 比起来完全是天壤之别。个人一般建议使用渐变替代阴影。...如果要使用「径向渐变」,可以使用 react-native-svg[21] RadialGradient 组件。...1.SVG RN SVG 支持是基于 react-native-svg[22] 这个仓库,就个人使用体验来说,基本和 Web SVG 功能没啥两样。

4.2K20

React Native 系列(八) -- 导航

RN中有两个组件负责实现这样效果,它们是: NavigatorIOS React Navigation 你可能在很多地方听说过Navigator,这个老组件会逐渐被React Navigation代替...笔者最后也会讲解一下Navigator使用,并实战演练一番。...NavigatorIOS使用步骤 初始化路由 注意:component,需要传入组件,自定义组件 NavigatorIOS按钮图片,默认会被渲染成蓝色 NavigatorIOS按钮,只能放一张图片...title:标题,如果设置了这个导航栏和标签栏title就会变成一样推荐使用 header:可以设置一些导航属性,如果隐藏顶部导航栏只要将这个属性设置为null headerTitle...我们先创建一个HelloViewComponent.js文件,然后index.ios.js文件导入,并且修改index.ios.js代码,如下: import HelloView from '.

6K80

ReactNative 常见问题及处理办法(加固混淆)

从 ScrollView TouchableOpacity 组件内滑动困难到 Xcode 编译路径设置,都有相应解决方案。...本文收集并解答了一些常见问题,为开发者提供了一些实用技术指南。 正文 ScrollView内无法滑动 TouchableOpacity 组件内使用 ScrollView 可能导致滑动失效。.../TouchableOpacity> RN热更新中文件引用问题 使用 codepush 进行热更新后, Android 系统中 src 目录下音频文件可能无法引用。...文件 第一项,填写我们需要重签名 ipa 路径(当前导入路径跟导出路径) 设置签名使用证书和描述文件 测试配置阶段使用开发测试证书,方便安装到手机测试混淆后ipa是否工作正常,测试ok,最后准备时候再改成发布证书和发布描述文件...除了以上列举问题外,还有诸如 Xcode 路径配置、iOS 下载链接拼接等问题都有相应解决方案。

25810

react-navigation,刷新你导航一、属性介绍二、案例

建议使用 header:设置一些导航属性,若想要隐藏顶部导航栏则只需要把这个属性设置为null headerTitle:设置导航栏标题 headerBackTitle:设置跳转页面左侧返回箭头后面的文字...iOS默认支持,安卓默认关闭 screen:对应界面名称,需要填入import之后页面 mode:定义跳转风格 card:使用iOS和安卓默认风格。...iOS默认底部,安卓默认顶部 swipeEnabled:是否允许标签之间进行滑动 animationEnabled:是否更改标签时显示动画 lazy:是否app打开时候将底部标签栏全部加载...属性 activeTintColor:设置活跃状态下,label和icon前景色 activeBackgroundColor:label和icon背景色 inactiveTintColor:设置活跃状态下...路径 - 提供routeName到路径配置映射,它覆盖routeConfigs中设置路径。 backBehavior - 后退按钮是否会切换到初始路由?

19.6K90

react-navigation导航器

https://reactnavigation.org/ ——源于React Native社区对基于Javascript可扩展且使用简单导航解决方案需求 。...导航还可以渲染通用元素,例如可以配置标题栏和选项卡栏。 react-natvigation自开源以来。短短不到3个月时间,github星数已达4000+。...经过笔者一天踩坑,想要成功运行请严格执行以下操作。其它不能保证。 请确保项目绝对路径无中文。...基本使用(重点) 这里使用堆栈导航。 createStackNavigator 提供APP屏幕之间切换能⼒,它是以栈形式还管理屏幕之间切换,新切换到屏幕会放在栈顶部。...可以通过指定⻚面的navigation.state.key来获取⻚页⾯面的标识 key必传,传默认返回一页 传参 现在我想定义一个参数给下一个也页面,可以这么做: <Button title

6.3K20

React Native 导航:示例教程

React Navigation 是用 JavaScript 编写,并不直接使用 iOS 和 Android 原生导航 API。相反,它重新创建了这些 API 某些子集。...React Native Navigation 有一点不同,它直接使用 iOS 和 Android 原生导航 API,这使得它能够提供更加原生外观和感觉。..., cd 进入项目文件夹,打开代码编辑器: cd ReactNavigationDemo 如果使用是 VS Code,则可以使用此功能在编辑器中打开当前文件夹: code ....则利用了原生 API;iOS UINavigationController 和 Android Fragment,这样导航行为就会与原生构建应用程序一样。...这就是为什么我们可以 HomeScreen.js 一个按钮使用它,当按下时,会导致页面跳转到 AboutScreen,如下所示: <Button title="Go to About" onPress

28610

React Native悬浮按钮组件

如果你项目中已经使用了react-native-vector-icons,那就不需要这步了。... {}}> <Icon name="<em>ios</em>-done-all-outline...,默认为56 active:是否显示按钮 position:按钮<em>的</em>位置,可以为left center right offsetX:X轴<em>上</em><em>的</em>偏移位置 offsetY:Y轴<em>上</em><em>的</em>偏移位置 <em>onPress</em>:点击事件...ActionButton.Item size:按钮<em>的</em>大小,默认为56 title:按钮标题 buttonColor:按钮颜色 <em>onPress</em>:点击事件 完整示例 完整代码:GitHub - forrest23.../ReactNativeComponents: React Native组件大全,介绍React Native常用组件<em>的</em><em>使用</em>方法和<em>使用</em>示例本次示例代码<em>在</em> Component10文件夹中。

2.8K20

React-Native踩坑记

react-native run-ios后没反应 完成了相关下载之后,运行react-native项目之后过两三分钟还是没有反应,请确保你网络良好并重新运行,等待一段时间。...最主要还是保持网络良好,不然相关依赖下载会失败 实现页面的热加载 项目启动之后,mac模拟器已经开启了,但是修改保存ide代码后,模拟器并不能够实现热加载。...这个时候应该开启模拟器项目热加载功能。做法如下: 模拟器中进入正在执行项目,然后mac按住command + d就可以调出对话框,选择Enable Live Reload就可以了。...调试操作: 运行项目后浏览器打开http://localhost:8081/debugger-ui/ 启动项目中开启远程js debugger。...中直接使用类似this.handleMethod这种方法是生效,比如: static navigationOptions = ({navigation}) => ({ headerLeft:

2.3K30

React Native学习笔记(三)—— 样式、布局与核心组件

Flexbox 布局 1.6.1、flexbox概要 RN 中使用 flexbox 规则来指定某个组件子元素布局,flexbox 可以不同屏幕尺寸提供一致布局结构 flexbox 术语...来编写视图; iOS 开发中是使用 Swift 或 Objective-C 来编写视图。...渲染一个蓝色标签状按钮, Android 则会渲染一个蓝色圆角矩形带白字按钮。...ios_backgroundColor='x' iOS,自定义背景颜色。当开关值为false或开关被禁用时(开关是半透明),可以看到这个背景颜色。... iOS 设置此颜色会丢失按钮投影。 tintColor='x' 关闭状态时边框颜色(iOS)或背景颜色(Android)。 value=布尔值变量 表示此开关是否打开。

13.9K31

React Native热更新方案

随着 React Native 不断发展完善,越来越多公司选择使用 React Native 替代 iOS/Android 进行部分业务线开发,也有不少使用 Hybrid 技术公司转向了 React...概述 iOS应用开发中,由于Apple严格审核标准和低效率,iOS应用发版速度极慢,这对于大多数团队来说是不能接受,所以热更新对于iOS应用来说就显得尤其重要。...热更新实现方案 当下选择使用 React Native 项目大都是基于原有项目的基础上进行接入,即所谓混合开发,而这些混合代码中,为了增加带代码难度(理解和维护难度),也只是将部分非核心代码...使用pushy进行热更新 本部分来自官方文档 不过需要注意是:笔者mac没有成功,window是可以… 安装命令 在你项目根目录下运行以下命令: npm install -g react-native-update-cli...这一机制称作“反触发”,这样当你应用启动初期即遭遇问题时候,也能在下一次启动时恢复运作。

9.4K70

网页中内嵌字体

但是有个前提是,你所使用某种特定字体系列,在网页中是否能显示,完全取决于用户机器该字体系列是否可用。如果用户机器没有这种字体,那就会变成默认字体。...+,Opera10+,iOS Mobile Safari4.2+ OpenType(.otf)格式: .otf字体被认为是一种原始字体格式,其内置TureType基础,所以也提供了更多功能...IE4+ SVG(.svg)格式: .svg字体是基于SVG字体渲染一种格式,支持这种字体浏览器有Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2...字体转换 在这里给大家推荐一个网站fontsquirrel,可以在线转换出各种字体,甚至生成一个CSS文件,我们直接就能在代码中使用。我们可以使用它将转换好字体和CSS文件下载下来。 ?...src:设置自定义字体相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用

3.8K70

React-Native踩坑记

react-native run-ios后没反应 完成了相关下载之后,运行react-native项目之后过两三分钟还是没有反应,请确保你网络良好并重新运行,等待一段时间。...最主要还是保持网络良好,不然相关依赖下载会失败 实现页面的热加载 项目启动之后,mac模拟器已经开启了,但是修改保存ide代码后,模拟器并不能够实现热加载。...这个时候应该开启模拟器项目热加载功能。做法如下: 模拟器中进入正在执行项目,然后mac按住command + d就可以调出对话框,选择Enable Live Reload就可以了。...调试操作: 运行项目后浏览器打开http://localhost:8081/debugger-ui/ 启动项目中开启远程js debugger。...中直接使用类似this.handleMethod这种方法是生效,比如: static navigationOptions = ({navigation}) => ({ headerLeft:

2K00

CSS3文本与字体

break-all:允许单词内换行 keep-all:只能在半角空格或连字符处换行 */ 兼容性:IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+ 2、word-wrap...,将被引用到Web元素中font-family source:自定义字体存放路径,可以是相对路径也可以是绝路径 format:自定义字体格式,主要用来帮助浏览器识别 weight:定义字体是否为粗体...Safari4.2+ OpenType (.otf)(被认为是一种原始字体格式,内置TureType基础,所以也提供了更多功能) 兼容性:FireFox3.5+、Chrome4+、Safari3.1...,可以从TrueType创建此格式字体) 兼容性:IE4+ SVG (.svg)(基于SVG字体渲染一种格式) 兼容性:Chrome4+、Safari3.1+、Opera10+、IOS Mobile...*/ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ } 字体文件+CSS模板一键生成网站

1.3K30

前端代码层面优化一些想法

这是最容易遵守但是开发过程中又很容易忽略一项,很多时候开发为了尽快交付,就将很多逻辑放在同一个文件中,甚至出现一个页面只有一个文件情况,虽然开发过程中,这样做减少了组件拆分和组件间通信工作量...开放封闭原则主张以一种允许更改源代码情况下扩展组件方式来构造组件。...虽然远离类继承会不可避免地将这一原则转变为完全不同东西,但使用继承编写 React 代码会使代码变得糟糕(React 团队推荐使用继承)。...hooks使用在项目中,hooks使用也并不够规范,例如最近遇到一个问题是:没有对变量进行useMemo包裹,导致每次都创建了canvas,最后ios直接导致黑屏修改前:const gradient...;同时也需要关心一些基础代码风格问题以及框架使用问题;项目的架构和组织组件都需要经常思考和优化。

1.1K20
领券