
React-Native
文章平均质量分 85
React Native一次学习,随处编写,工作中的一些使用与实践经验
suwu150
业精于勤,荒于嬉;行成于思,毁于随;磨刀不误砍柴工。
展开
-
React Native支持Tailwind CSS 语法
在React Native中使用Tailwind CSS并不是直接支持的方式,因为Tailwind CSS是一个针对Web开发的CSS框架,而React Native是用于原生移动应用开发的框架,两者并不直接兼容。Tailwind CSS的核心理念是提供一套完整的、最小单位的工具类CSS,开发者可以直接在HTML中组合这些工具类来快速构建页面,而无需编写自定义的CSS。三方库支持语法,TailwindCSS + React Native的一个简单,用TypeScript编写的富有表现力的API实现。原创 2024-05-03 09:46:38 · 2895 阅读 · 0 评论 -
ReactNative中升级IOS 17版本Crash解决
ReactNative中IOS 17版本Crash UIGraphicsBeginImageContextWithOptions 或者UIGraphicsEndImageContext会报出 Assert。错误信息会是下面这样UIGraphicsBeginImageContext() failed to allocate CGBitampContext: size={382, 0}, scale=3.000000, bitmapInfo=0x2002. Use UIGraphicsImageRenderer原创 2023-09-20 22:23:42 · 7928 阅读 · 5 评论 -
React Native实现震动反馈效果
但从文档中我们发现,在Android系统中,我们能够通过参数进行修改震动反馈模式,我们能够调整到我们想要的效果,但是对于IOS系统,则是参数固定为400ms,这400ms这个效果对我们需求来说,算是比较长的一个反馈时常,触摸反馈是不符合我们的要求的。接下来,我们添加到我们的项目中体验下实际的效果,如果目前手上没有实际的项目,我们快速通过模版创建一个全新的项目验证。业务开发中,总会用到一些和用户反馈的效果,用来提升用户对于某个事件或者操作的重要程度,比如常见的就是。】,发现有比较多的一些反馈效果。原创 2023-07-24 22:18:16 · 3342 阅读 · 0 评论 -
日常开发为什么需要做Code Review
出现这种情况的常见算法一般都是先找出数组中固定的某一个值,然后在用这个值去做业务逻辑,这样可能得和业务人员确定是否存在更加优化的处理方案,比如下面是用了es6中结构赋值的方案去减少了一次检索的过程,这种双循环的,一般都仔细检查下看看是否有优化方案。提高代码质量: 可以帮助开发者更好地编写代码,减少错误和缺陷,提高代码的质量和可维护性。看的我是一堆乱麻,不由得让我开始思考,程序员果真是懒,如果再勤快一些,可能会进行代码的封装和考虑这些公用方法及组件的抽取,同时也存在项目中Code Review 的缺失。原创 2023-05-04 22:36:36 · 2580 阅读 · 1 评论 -
React Native中防止滑动过程中误触
解决这次触摸,主要是使用点击事件本身的一个响应机制,在中间通过记录状态值的方式去处理使用到的方法涉及到按下时、抬起时、按下这三个过程通用功能组件需要进行封装,以达到业务功能上的适配。原创 2023-05-04 22:26:56 · 2913 阅读 · 0 评论 -
React-Native版本更新功能和获取商店应用版本信息
一、背景说明俗话说的好,一个好的app应用,是要不停的告诉用户,我们还在维护,你可以放心的使用,放心的“充钱”,那该怎么告诉我们亲爱的用户的,那就是通过定期不定期的更新app。说到这里,我们就该提出该如何实现这个更新和提示的功能了,总结来说,我这里已经实现过的有两种方案:1.设计专门的版本应用服务器,用来存储app的版本信息2.通过专用接口,在app store或者google play中获取对应app的版本信息对于第一种方式,就是自己搭建后段服务,每次启动应用时都去请求服务其中的数据,然后进行比原创 2023-03-05 23:01:08 · 2578 阅读 · 0 评论 -
useMemo和useCallback:何时使用它们,何时不使用它们
我们都被告知要使用 React 钩子useMemo和通过让 React “记住”复杂的计算来提高性能。每当我们将大量逻辑包装到这些钩子中时,它们真的能提高性能吗?在本博客中,我们将了解这些钩子的作用并进行一些实验以了解它们对整体性能的影响。翻译 2022-10-30 15:10:23 · 494 阅读 · 0 评论 -
React Native获取图片的真实大小自适应
React Native获取图片的真实大小我们在项目开发中,为了能够让图片在我们前端显示的时候不会变形,我们通常会根据图片本身的真实宽高进行计算比例,这种计算之后再设置给图片的属性,就能够展示出我们理想的图片。下面总结了下获取图片属性大小的方法。原创 2022-05-15 17:23:17 · 6036 阅读 · 1 评论 -
React-Native清除缓存汇总
如果单纯重启还是不行,可以打出下面一套组合拳,是把相关的缓存都清了一趟,如果还有问题,要思考可能问题并不是缓存的锅,可能得考虑是不是代码确实存在问题。启动的话,就会存在本地服务bundle.js使用缓存的情况,总是无法在模拟器或者真机上重新获取到最新的修改后的代码,在我知道有了。有些情况下,如果使用了flow检查,可能在提交代码的时候检查有问题,可以清除掉flow检查的一些缓存。命令之后,我就是用该命令进行启动,但是我却是在错误的使用,我错误的用法是。,错误的用法不会起到刷新缓存的作用。原创 2021-10-22 10:03:55 · 5255 阅读 · 0 评论 -
React-Native按钮无法点击问题排查
开发时,我们有时会遇到明明对某一块区域设置了点击响应事件,但仍然不起作用的情况,我们可以从以下方面进行排查:1.点击事件方法名称是否对应和正确2.涉及到界面View组件的,onStartShouldSetResponder、onStartShouldSetResponderCapture属性设置检查,以及pointerEvents属性值检查3.检查组件层级,研究是否有绝对定位影响,导致想要触发的层级在最下面,无法响应...原创 2021-07-21 10:33:46 · 4485 阅读 · 0 评论 -
React Native 0.64发布更新
前不久,也就是2021年3月12日,React-Native官方发布了最新版本0.64,这个版本相对来说有较大的更新。一、ios中加入了hermes引擎在android版本中已经支持有一段时间的hermes引擎在ios中添加了支持。Hermes是一个开放源代码的JavaScript引擎,专门针对运行React Native进行了优化。它通过降低内存利用率,减小下载大小并减少应用程序可用或“交互时间”(TTI)所花费的时间来提高性能。在此版本中,您现在也可以使用Hermes在iOS上进行构建。要在iO原创 2021-04-30 12:18:10 · 2295 阅读 · 0 评论 -
adb命令-adb reverse的研究
最近在开发安卓应用的时候,自以为是需要通过连接到同一个网络下,才能够进行debug调试,但现实就是啪啪打脸,只能是自己年少不自知,在同事老大哥的指导下,学习到了命令。原创 2021-04-17 22:06:54 · 16407 阅读 · 5 评论 -
React-Native与移动端开发汇总介绍
生活不容易,时常来总结,作为开发者,今天我们来看看React-Native与移动端开发的现状一、常见的开发方式移动应用开发的方式,目前主要有三种:Native App: 本地应用程序(原生App)Web App:网页应用程序(移动web)Hybrid App:混合应用程序(混合App)对于以上三类开发方式都有各自的优势和劣势,在使用过程中也应该按照自己业务进行具体的选型使用,大致可以按照如此规则进行使用,一般公司App会存在三种技术栈,当然也存在单一类型实现方案的公司,对于三种技术栈的使用,原创 2021-04-10 22:14:26 · 3328 阅读 · 0 评论 -
函数防抖和函数节流原理理解
防抖:interval时间内,如果有fn再次触发,则会清除上次的函数执行,重新设置新的延迟函数,如果超过interval事件间隔,则会执行传入的fn函数。一般是用来,用户输入有操作时,暂时不执行动作,等待没有新操作时,进行相应响应,例如用户名输入校验的情况,可以等待用户输入完成后再发送请求去校验。一般是用在必须执行这个动作,但是不能够执行太频繁的情况下,例如滚动条滚动时函数的处理,可以通过节流适当减少响应次数;函数内容执行完毕,将lock置为true之后,才会再次执行,从而达到减少fn响应次数。原创 2020-04-25 21:45:57 · 4802 阅读 · 2 评论 -
如何优雅的展示动态图标lottie-react-native
Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative,利用Json文件的方式快速实现动画效果的库。2.在左侧的项目浏览器中,右键单击您的应用程序名称,然后单击新建文件…为项目创建一个空的Swift文件(添加时请确保选择了target是“您的应用名称”)如果实在找不到了,就使用这里的json文件->项目中,需要使用到动态图标,发现又好用的库,在这里分享一下,需要使用的工具库为。软件中的动画特效,以json文件的方式导出,来实现动画的效果。还能够指定的更改图层的颜色。原创 2020-04-04 11:24:41 · 4006 阅读 · 0 评论 -
react-native自定义按钮
The final rendering Description: A custom button component that should render nicely on any platform. Supports a minimal level of customization. Installation: npm inst...原创 2018-06-17 20:32:44 · 1295 阅读 · 0 评论 -
React-Native状态栏组件(StatusBar)的使用详解
StatusBar 是手机顶部的状态条。StatusBar 是 React Native 0.20 起新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性。React-Native项目可以同时加载多个 StatusBar 组件,这些 StatusBar 组件的属性可以按照加载的顺序进行合并。一种常见的用法就是:我们可以在使用 Navigator 的时候,针对不同的路由页面设置特殊的状态栏样式。原创 2018-11-01 00:06:53 · 18733 阅读 · 2 评论 -
Android中gradlew命令的基本使用
Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具。它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML 的各种繁琐配置。 面向Java应用为主。当前其支持的语言限于Java、Groovy和Scala,计划未来将支持更多的语言。build.gradle是Gradle默认的构建脚本文件,执行Gradle命令的时候,会默认加...原创 2018-07-11 21:12:08 · 14749 阅读 · 0 评论 -
'config.h' file not found'和/Libraries/WebSocket/libfishhook.a'-Xcode10,React-Native更新问题
1.React Native 中在xcode10运行提示 ‘config.h’ file not found解决方法:在项目终端执行以下命令cd node_modules/react-native/third-party/glog-0.3.4../../scripts/ios-configure-glog.shclean the project and build again, th...原创 2019-01-06 20:10:56 · 782 阅读 · 0 评论 -
react-native树形结构选择组件
能够按照数据结构进行展开树状结构,通常用来进行展示具有明显层级关系的数据结构,展示的同时,能够进行指定默认值展开和默认选中值,能够进行单选和多选操作,进行通过传递props禁止选择等功能.原创 2019-09-06 15:02:09 · 4112 阅读 · 6 评论 -
React-Native调用系统分享组件Share组件的使用
这个库能够完美的支持分享功能,其中包括字符串分享、本地文件分享(图片、pdf等)、远程文件分享等功能.是一个很好的替代库.title: React-Native调用系统分享Share组件的使用。至少需要一个 url 和message。打开一个分享文本内容的对话框。ios系统测试,调起系统分享。至此完成分享功能的说明.表示内容已成功分享。原创 2018-10-21 17:54:51 · 9291 阅读 · 4 评论 -
duplicate entry: com/google/gson/FieldNamingPolicy$5.class
duplicate entry: com/google/gson/FieldNamingPolicy$5.class1.问题说明在使用gson中的时候,出现如下错误:Execution failed for task ‘:app:transformClassesWithJarMergingForRelease’.com.android.build.api.transform.Transf...原创 2018-10-28 17:01:30 · 1707 阅读 · 0 评论 -
基于react-native实现情侣小游戏
–一、背景前段时间,突发奇想,想要自己做一款能够上架的app,就根据react-native进行了开发,其中具有的功能点就是情侣了解度的测试,通过一些 情侣应该知道的问题进行测试双方的了解程度,了解的越多,则得分也就越高,在这个app里边区分男方和女方,用户点击进如对应的题库进行答 题,最终获取分值 二、效果 三、下载安装与查看1.首先,通过命令进行...原创 2018-06-25 21:58:01 · 2204 阅读 · 0 评论 -
react-native实现树结构选择组件
能够按照数据结构进行展开树状结构,通常用来进行展示具有明显层级关系的数据结构,展示的同时,能够进行指定默认值展开和默认选中值,能够进行单选和多选操作,进行通过传递props禁止选择等功能。原创 2018-06-18 02:39:26 · 6925 阅读 · 20 评论 -
react-native实现字符串样式分割组件
react-native-string-distinctionreact-native-string-distinction,divide the character string according to a certain character and display it in different styles after segmentationThe final renderi...原创 2018-06-17 21:34:12 · 4706 阅读 · 0 评论 -
react-native自定义文本输入框
title: react-native自定义文本输入框 date: 2018-06-17 20:45:31tags:react-nativereact-native-custom-textInputreact-native-custom-input,一个自定义的输入组件 The final renderingInstallation: ...原创 2018-06-17 20:48:44 · 4440 阅读 · 0 评论 -
如何使用模版快速构建react-native项目
前言我们在开始搭建项目的时候,很多时候都是使用同一套架构,基本不会发生很多变化,有没有什么方法,能够进行批量化搭建项目,在react-native中就有一个简单的方法,搭建属于自己的模板方法,那就是使用命令行--template进行创建项目 常规方法通常情况下,我们使用下面命令行进行项目搭建,如下面代码:react-native init projectName使...原创 2018-05-01 13:45:31 · 2774 阅读 · 0 评论 -
React-Native打包apk文件
Android要求所有应用都有一个数字签名才会被允许安装在用户手机上,所以在把应用发布到类似Google Play store这样的应用市场之前,你需要生成一个签名的APK包 1.生成一个签名密钥你可以用keytool命令生成一个私有密钥。在Windows上keytool命令放在JDK的bin目录中(比如C:\Program Files\Java\jdkx.x.x_x\bin),你可能...原创 2018-04-12 17:24:01 · 1844 阅读 · 0 评论 -
React-Native如何指定特定设备测试
1. React-Native中的调试方法指定查看安卓设备在React-Native中输入以下命令,能够看到连接到电脑中的真实设备和虚拟设备adb devices设备结果如下图所示 然后通过下面命令进行指定特定的设备进行运行和安装你要运行的app即可,命令行如下所示react-native run-android --deviceId yourdevice...原创 2018-04-14 17:24:28 · 1753 阅读 · 0 评论 -
React中静态类型校验-PropTypes学习
PropTypes学习 官方网址详细说明1.基本说明PropTypes定义为组件类自身的属性,用以定义prop的类型。在开发模式下,当提供一个不合法的值作为prop时,控制台会出现警告;在产品模式下,为了性能考虑应忽略propTypes Prop types 是一个在运行时使用的新特性. 我们能够通过下面的方式在我们的团队里边使用.2.版本更新在15.5版本之后, 代替...原创 2018-03-06 16:46:47 · 14829 阅读 · 0 评论 -
react-native打包release版本闪退
undefined is not an object (evaluating ‘s.View.propTypes.style’)1.问题描述 我在用react-native进行项目打包的时候,我的debug模式在真机中能够运行,在release模式下运行时闪退,我在Android studio中查看logcat的时候,出现下面代码, 07-10 19:05:07.446 12390-...原创 2018-07-17 12:28:25 · 9794 阅读 · 3 评论 -
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
xcrun: error: unable to find utility “instruments”, not a developer tool or in PATH在WebStorm中运行React-native(iOS)工程时出现如下错误, 1.解决方法: 在终端执行如下命令sudo xcode-select -s /Applications/Xcode.app/Contents/...原创 2018-07-05 10:38:09 · 2792 阅读 · 0 评论 -
React-Navigation中withNavigation、withNavigationFocus高阶组件的使用
当你无法直接将 navigation 这个 prop 传递给当前组件的时候,或者不想在深度嵌套的子组件中传递它时,它将非常有用,能够直接使用这个高阶组件进行包装需要navigation属性的组件即可。使用方法如下所示,我们通过使用withNavigationFocus组件进行包装组件FocusStateLabel,从而获取到isFocused状态进行判断,值得说明的是,这个效果是和从navigation属性中方法isFocus()方法值是一致的。原创 2018-10-20 21:04:19 · 4179 阅读 · 1 评论 -
React-Native导航组件React-Navigation的详细介绍
React-Native导航组件React-Navigation的详细介绍一、 导航栏分类二、 具体说明(一). StackNavigator 导航栏1.5 界面跳转和数据传递(1).navigate()-调用这个方法可以跳转到导航器中的其他页面(2) goBack() -关闭当前活跃屏,相当于功能(3)addListener() – 订阅导航生命周期事件变化(4) isFocused() – 查看屏的聚焦状态(5)state – 屏幕的当前状态/路由。原创 2018-10-20 18:16:35 · 8331 阅读 · 3 评论 -
React Native中非常犀利的画虚线的方式
不满官方的提供的效果,那只能我们门自己去实现了,于是乎我就使用了下面这种方式,通过不停的打印一个文本字符,由字符数量控制虚线的长短。以上也是其中的一种方案,后面我在做另外一个项目的时候,使用了另外一种新的方案,在此记录下,具体使用时小伙伴自己决定吧。仍然使用官方提供的属性,但是画一个完整的矩形,然后使用虚线属性设置,然后在定义一个绝对定位的。最终的结果就是不满意官方产生的效果,得考虑使用其他的方案实现。相对于官方还是比较满意的一个效果,比较符合预期。在我看来,这个效果稍微比上述效果会好一些。原创 2018-10-22 21:01:09 · 8690 阅读 · 2 评论 -
IOS 真机 dyld: Library not loaded 错误Crash
刚刚开始看IOS,编译一个现存项目,模拟器OK,真机 archive打包 crash.搜索了众多解决方案,百度上的太坑了,找不到适合我的,像说什么把 Targets -> Build Phases ->Link Binary With Libraries 中相应.framework 的status 改为 Optional的,我对IOS不熟都觉得不对,这样虽然可以运行,但是你用到lib方...转载 2018-09-13 09:17:58 · 3413 阅读 · 0 评论 -
React-Native中Keyboard模块
Keyboard组件是用来控制键盘的事件用法Keyboard 模块允许react代码能够进行监听本地的事件,也能够改变键盘的状态,比如能够dismissing键盘,如下代码所示import React, { Component } from 'react';import { Keyboard, TextInput } from 'react-native';class E...翻译 2018-08-19 18:37:50 · 1990 阅读 · 0 评论 -
React-Native中事件监听DeviceEventEmitter
从上面代码中,我们能够看到通过DeviceEventEmitter进行设置了监听,根据React-Native生命周期,当组件加载的时候,我们进行监听,当组件卸载的时候,我们移除监听事件。从代码中,我们能够看出实现了的方法有addListener,但是没有我们在使用中的其他方法,我们对代码进行分析,可以看到,在这里进行引入了下面这两个文件。也就是我们发起请求时message信息的处理方式,在这过程中,当然还有其他几处代码进行了事件处理,在这里就不一一说明了。原创 2018-08-12 00:00:44 · 17916 阅读 · 1 评论 -
react-native设置应用启动页
2、选中Image.xcassets ➜ LaunchImage,就是上一步创建的LaunchImage,右侧框中的部分是让你选择要支持的系统,横竖屏之类的(这个按照需求选择,如果你的项目不打算支持ios6可以不选择)。3、选中LaunchScreen.xib,会有个弹出框,默认选择确定就行,然后把右边的 Use Launch Screen 取消选中(因为ios可以用来自定义图片启动屏幕或通过 LaunchScreen.xib启动屏幕,ios默认s设置,我们在这里取消掉默认设置的)。原创 2018-07-29 12:35:25 · 17640 阅读 · 0 评论 -
react-native应用集成地理逆编码
一、背景最近,在项目中需要集成定位功能,在网上搜集资料之后,决定采用逆地理定位功能进行实现,那么让我们看看逆地理定位功能是怎么实现 的。二、思路主要过程分为两部分,一部分是获取定位点的经纬度,二部分是将经纬度进行上传调用能够解析经纬度的接口,进行对应地理信息的获取。在 解决上述问题的过程中使用了百度逆地理和高德逆地理定位功能,如下所示分别是高德逆地理和百度逆地理的访问...原创 2018-07-06 08:55:59 · 3747 阅读 · 13 评论