首页
学习
活动
专区
工具
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.5K20
  • 🤯 没 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.4K20

    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 下载链接拼接等问题都有相应的解决方案。

    32410

    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.7K90

    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,如下所示: onPress

    45410

    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.5K70

    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=布尔值变量 表示此开关是否打开。

    14.3K31

    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踩坑记

    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

    网页中内嵌字体

    但是有个前提是,你所使用的某种特定的字体系列,在网页中是否能显示,完全取决于用户机器上该字体系列是否可用。如果用户机器上没有这种字体,那就会变成默认的字体。...+,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规则里使用。

    4K70

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

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

    1.2K20

    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 Native导航器之react-navigation使用

    Visual Option(视觉选项): ·mode- 定义渲染(rendering)和转换(transitions)的模式,两种选项: 1) card-使用标准的iOS和Android的界面切换,...·cardStyle- 使用该属性继承或者重载一个在stack中的card的样式。 ·onTransitionStart- 一个函数,在换场动画开始的时候被激活。...2)title-标题 String或者是一个react 节点 3)backTitle-返回按钮在iOS平台上,默认是title的值 4)right- react 节点显示在header右边,例如右按钮...版设置 在iOS中使用react-navigation需要注意以下几点: 使用Xcode设置Schemes; 在AppDelegate添加一下代码: - (BOOL)application:(UIApplication...openURL:url sourceApplication:sourceApplication annotation:annotation]; } js组件在注册路由时设置唯一的路径

    12.5K70
    领券