![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
【ReactNative 知识归集】
文章平均质量分 74
浅夏晴空
这个作者很懒,什么都没留下…
展开
-
RN TouchableOpacity点击事件不响应原因详解
问题 首先是整个页面布局如上:在实际开发中发现 如下红框中的所有区域点击事件均没有效果,不会触发 问题定位RN基本触摸组件尝试TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedbackonPressIn:点击开始;onPressOut:点击结束或者离开;onPress:单击事件回调;onLongPress:长按事件回调。以上触摸事件无论怎么尝试在红框区域原创 2021-12-20 10:27:27 · 2890 阅读 · 0 评论 -
Xcode启动RN报错“`fsevents` unavailable“
fsevents unavailablemacOS fsevents unavailable (this watcher can only be used on Darwin)安装文件监听#清除本地原有的watchmannpm r -g watchman #英特尔MAC 安装brew install watchman #M1芯片 安装arch -arm64 brew install watchman 如果失败还可以使用如下命令 官网/bin/bash -c "$(curl -fsSL原创 2021-11-24 10:47:06 · 791 阅读 · 0 评论 -
年终盘点跨平台技术(Hybrid、RN、Weex、Flutter)-全栈系列
跨平台技术发展的三个阶段第一阶段是混合开发的web容器时代为了解决原生开发的高成本、低效率,出现了Hybrid混合开发原生中嵌入依托于浏览器的WebViewWeb浏览器中可以实现的需求在WebView中基本都可以实现但是Web最大的问题是,它的性能和体验与原生开发存在肉眼可感知的差异因此并不适用于对性能和用户体验要求较高的场景第二阶段是以RN和Weex为代表的泛web容器时代RN对Web标准进行了功能裁剪用户体验更接近于原生了由于进行了功能裁剪,所以RN对业务的支持能力还不原创 2021-01-27 10:25:24 · 1846 阅读 · 0 评论 -
RN和React路由详解及对比
前言在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换。下面会对比一下react路由和RN路由的本质区别和使用方法。路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程React路由简介使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom。本文主要针对react-router-d原创 2020-06-01 11:27:05 · 1957 阅读 · 0 评论 -
xcode高版本常见的RN本地启动报错
xcode编译报错:‘config.h’ file not found解决方案cd node_modules/react-native/third-party/glog-0.3.4../../scripts/ios-configure-glog.sh启动报错:Unknown argument type ‘attribute’ in method -[RCTAppState getCu...原创 2020-04-10 10:09:15 · 900 阅读 · 0 评论 -
前端经典面试题(60道前端面试题包含JS、CSS、React、网络、浏览器、程序题等)
(以下所有答案仅供参考)简答题1、什么是防抖和节流?有什么区别?如何实现?参考答案防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间思路:每次触发事件时都取消之前的延时调用方法function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 ret...原创 2020-01-10 16:29:14 · 1119 阅读 · 0 评论 -
RN 轮播
Radio单选框1、功能说明用于在多个备选项中选中单个状态。Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多2、组件效果3、代码演示import React, { Component } from "react";import { Alert, View, Text, StyleSheet, TouchableOpacity, Image, ScrollView...原创 2018-11-07 16:02:50 · 1187 阅读 · 0 评论 -
RN网络请求封装
前言作为前端开发人员,网络请求工具对大家来说肯定不陌生。iOS的AFNetworking,Android的okHttp等。但是对于RN来说,我们最常用到的就是js原生的Fetch请求了。React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的ajax)或是其他的网络API,那么Fetch用起来将...原创 2018-11-29 14:10:31 · 4277 阅读 · 0 评论 -
Android Fetch请求问题
前言作为前端开发人员,网络请求工具对大家来说肯定不陌生。iOS的AFNetworking,Android的okHttp等。但是对于RN来说,我们最常用到的就是js原生的Fetch请求了。React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的ajax)或是其他的网络API,那么Fetch用起来将...原创 2018-12-04 10:18:57 · 3974 阅读 · 0 评论 -
RN position定位及Android兼容处理
前言在RN开发中仅仅使用flex布局,也满足不了我们日常的需求开发;RN官方也提供了定位布局,flexbox定位和position定位可以同时使用,同时生效;positionRN提供了两种布局方式:absolute和relativerelative相对于 上一个兄弟节点不可以浮动(尽管偏移了,还是占了一个位置)absolute相对于 父视图浮动的绝对布局是脱离文...原创 2018-11-30 15:12:59 · 8675 阅读 · 0 评论 -
React Native开发总结(二)
58车商通RN落地实践## 引言开发已经经历了几个阶段,从Native App 到 WebApp大火,再到苹果公司禁Web,又发展到了Hybrid的Web与原生共生。再到React Native,这种利用Js 转成原生的取中方案。React Native 说到底还是调用Native原生,所以效率损耗的话很接近原生开发。所以目前很多App 都采用了RN开发,本文将就58车商通介绍下RN在其中的...原创 2019-02-27 10:51:14 · 1121 阅读 · 0 评论 -
RN环境搭建(Android端)
Windows + Android环境搭建开发软件依赖Python2注:目前不支持Python3版本下载地址Python 2.7.15,下载后直接安装即可。Node下载地址Node.js 7.6.0,与React Native构建平台使用node版本一致安装完 node 后建议设置 npm 镜像以加速安装第三方依赖。npm config set registry https://...原创 2019-03-04 17:27:00 · 2899 阅读 · 1 评论 -
RecyclerListView的使用
概述和功能RecyclerListView 是一个高性能的列表(listview)组件,同时支持 React Native 和 Web ,并且可用于复杂的列表。RecyclerListView 组件的实现灵感,来自于 Android RecyclerView原生组件及iOS UICollectionView原生组件。RecyclerListView使用“cell recycling”来重用不再...原创 2019-04-04 15:43:50 · 10182 阅读 · 0 评论 -
ListView vs FlatList vs RecyclerListView性能对比
前言长列表或者无限下拉列表是最常见的应用场景之一。React Native在0.43版本之前写列表需要使用ListView,ListView存在性能问题,API也不友好,所以官方在0.43版本推出了FlatList,有如下优点:API更加友好和丰富;性能好很多;使用方法ListView对于ListView最重要的两个属性,一个是数据源(dataSource),再一个就是列表项渲染(...原创 2019-04-08 17:11:00 · 1609 阅读 · 0 评论 -
RN PickerView组件
pickerView多滚轮选中组件1、功能说明页面底部弹出的半屏滚轮选择弹窗目前仅支持到双滚轮,三滚轮的后期再扩展2、组件效果单滚轮双滚轮3、数据格式单滚轮数据{ option: [ { text: "双轴", value: "685908" }, { ...原创 2018-11-09 17:57:20 · 2928 阅读 · 1 评论 -
RN FlatList使用详解及源码解析
FlatList使用详解及源码解析前言长列表或者无限下拉列表是最常见的应用场景之一。RN 提供的 ListView 组件,在长列表这种数据量大的场景下,性能堪忧。而在最新的 0.43 版本中,提供了 FlatList 组件,或许就是你需要的高性能长列表解决方案。它足以应对大多数的长列表场景。一、功能简介FlatList高性能的简单列表组件,支持下面这些常用的功能:完全跨平台。支持水平...原创 2018-10-26 17:00:00 · 10496 阅读 · 2 评论 -
React Native 交互管理器InteractionManager
一个可以提升用户体验和交互效果的模块InteractionMnager(交互管理器)一、基本内容使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行,这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。比如:导航的转场动画对大多数React Native应用来说,业务逻辑是运行在JavaScript...原创 2018-04-26 16:33:28 · 4949 阅读 · 0 评论 -
React Native FlatList和SectionList列表组件
FlatList之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过Android的朋友都知道,Android的ListView如果不自己处理一下,也是有效率问题的。所以官方又推出了FlatList,而且自带上拉下拉的功能功能简介完全跨平台。支持水平布局模式。行组件显示...原创 2018-04-25 13:56:59 · 1227 阅读 · 0 评论 -
React Native Keyboard使用详解
当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整,或者在程序中使用代码收起这个软键盘,这些借助 React Native 框架提供的Keyboard API 就可以实现。一、Keyboard API提供的方法Keyboard API提供如下的静态函数供开发者使用:1、addListener(eventName, callback)(1)这个函...原创 2018-04-18 15:14:36 · 7145 阅读 · 0 评论 -
React Native中一些常用组件用法
View组件View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用View的属性介绍,请参考官网View的常用样式设置flex布局样式backgroundColor:背景颜色borde...原创 2018-04-17 15:08:09 · 691 阅读 · 0 评论 -
React Native屏幕尺寸适配
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同,比如我们的设计稿一个View的大小是300,如果直接写300,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配。安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局。而RN本身并没有适配规则,而原生的又比较反锁,这...原创 2018-04-17 11:17:13 · 4323 阅读 · 0 评论 -
RN style使用以及常用样式总结
React-Native 编写的应用的样式不是靠css来实现的,而是依赖javascript来为你的应用来添加样式1、声明样式导入必要文件import React, { StyleSheet } from "react-native";const styles = StyleSheet.create({ base: { width: 38, height: ...原创 2018-04-16 16:42:24 · 9030 阅读 · 0 评论 -
RN Image与ImageBackground
[个人博客](https://gongchenghuigch.github.io/2018/04/16/rnimage/)一、Image组件的基本用法1.1 从当前项目中加载图片要往App中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:<Image source={require('./my-icon.png')} /> 即: ...原创 2018-04-16 15:58:14 · 16386 阅读 · 0 评论 -
RN性能优化以及事件监听
自从React Native出世,虽然官方一直尽可能的优化其性能,为了能让其媲美原生App的速度,但是现实感觉有点不尽人意。接下来介绍下实践中遇到的一些性能问题以及优化方案。一、StackNavigator页面切换动画优化 场景:在navigation还没出来时,导航路由使用NavigatorIOS来实现,页面切换是很流畅的,但是用了StackNavigator navigatio...原创 2018-07-12 14:20:36 · 2353 阅读 · 0 评论 -
React Native开发总结(一)
一、RN优劣势React Native的设计理念: 既拥有Native的用户体验、又保留React的开发效率优势:它对比原生开发更为灵活,对比H5体验更为高效。替代传统的WebView,打开效率更高,和原生之间的交互更方便。多个版本迭代后的今天,它已经拥有了丰富第三方插件支持。更方便的热更新。劣势:尽管是跨平台,但是不同平台Api的特性与显示并不一定一致。...原创 2018-06-12 13:57:36 · 708 阅读 · 0 评论 -
ReactNative 自定义封装Radio单选组件
前言由于RN官网并没有提供Radio单选组件,所以需要自己封装通用的单选组件实现效果图: 单列布局 两列布局传值方式1、使用 dataOption={datas} 属性传值 必填属性datas数据示例:[{ selecteId: 13, content: &amp;lt;Tex...原创 2018-07-24 20:12:04 · 6060 阅读 · 0 评论 -
RN通信机制和渲染流程
前言React Native与传统的HybirdApp最大区别就是抛开WebView,使用JSC+原生组件的方式进行渲染,那么整个App启动/渲染流程又是怎样的呢?一、整体框架RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP; React 与 React native 的原理是相同的,都是由 javascript 实现的虚拟DOM 来驱动界面 Vi...原创 2018-07-19 15:03:38 · 9586 阅读 · 0 评论 -
ReactNative组件导出
前言如果对RN开发有一定的了解的话,就会发现,ReactNative提供的组件不能完全满足开发的需求,就需要自定义一些组件,那么如何导出全局的自定义组件呢?组件的导出组件导出有两种形式:默认组件导出非默认组件导出开发者一般使用默认组件导出 首先在项目下面新建一个文件夹rn-designrn-design就是一个自己的组件库类似于react-native的...原创 2018-07-25 15:10:53 · 1527 阅读 · 0 评论 -
ReactNative 基于rmc-datepicker的日期选择的使用
实现效果:API pram description type default styles 自定义DatePicker样式 Object pickerStyles value 选中值 String 当前日期 mode 日期类型:1、date:年月日 格式YYYY-MM-DD2、time:时分 格式HH:mm3、d...原创 2018-08-01 11:27:56 · 2675 阅读 · 2 评论 -
RN react-navigation使用
一、命令安装npm install react-navigation --save该库包含三类组件:(1)StackNavigator:用来跳转页面和传递参数(2)TabNavigator:类似底部导航栏,用来在同一屏切换不同页面(3)DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉的屏幕二、react-navigation1、StackNavigator属性介绍navigati...原创 2018-04-16 10:57:34 · 4074 阅读 · 0 评论