![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Native
慕天远
勤奋好学,
展开
-
setNativeProps详解
在React Native里面,如果要改变组件的样式可以通过state或者props来做到。但有些时候由于性能瓶颈,不得不放弃通过触发render的方式来改变样式,而是通过setNativeProps来直接更改原生组件的样式属性,以达到相同的效果。比如header渐变和搜索框出现都是直接通过setNativeProps来实现的。因为header要响应滚动事件,如果使用setState来实现的话...转载 2019-12-27 17:00:04 · 1846 阅读 · 0 评论 -
adb shell logcat 命令的运用
android 开发的程序员开发程序的时候 ,一定为log而苦恼吧。Eclipse老是Log找不到,是不是很让人不爽,虽然Android Studio的Logcat功能很不错,蛋也没有在命令行terminal中打印出来更方便。adb logcat这个命令会输出Log的格式为日志时间,进程号,线程号,Log级别,TAG,后面跟的是Log内容。adb logcat -v time-v后...原创 2019-12-25 15:36:09 · 2593 阅读 · 1 评论 -
React Native 放抖延时
防抖延时是经常用到的动能,比如处理滚动事件做一些复杂计算,这样就会频繁调用回调函数,很容易造成页面的卡顿。这种情况下,我们更希望把多次计算合并成一次,只操作一个精确点,我们普遍把这种方式成为debounce(防抖)和throttle(节流)当持续触发事件时,一定时间段内没有再触发事件,事件处理函数就会执行一次,如果设定事件到来之前,又触发了事件就重新开始延时。也就是说当一个用户一直触发这个函数...转载 2019-11-29 10:31:48 · 583 阅读 · 0 评论 -
透明度与十六进制对应表
透明度 十六进制 100% FF 99% FC 98% FA 97% F7 96% F5 95% F2 94% F0 93% ED 92% EB 91% 90% 89% 88% 87% 86% 85% ...原创 2019-11-13 09:36:52 · 467 阅读 · 0 评论 -
React Native集成高德地图(android)
首先要在这个网站上注册用户 然后根据说明创建应用,在应用右边点击加号添加key。如何获取key: https://lbs.amap.com/api/android-sdk/guide/create-project/get-key获取key之前需要填写两个SHA1值 ,一个是发行版本的SHA1值 一个是调试时候的SHA1值获取调试版本SHA1值(需要根据开发工具的不同来生成,我用的...原创 2019-10-31 09:27:57 · 1433 阅读 · 1 评论 -
Fetch 请求的超时设置与终止请求
最近在做一个项目,里面涉及到用户自定义服务器地址,这个服务器地址需要验证。原本请求用的是fetch。fetch本身并不支持超时处理,为了有较小的改动就能够实现超时的问题,我研究了一下。在使用XMLHttpRequest可以设置请求超时时间,可是转用Fetch后,超时时间设置不见了,在网络不可靠的情况下,超时设置往往很有用ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解...原创 2019-10-23 17:34:10 · 1846 阅读 · 0 评论 -
React Native svg入门
首先安装并链接该库yarn add react-native-svgreact-native link react-native-svg常用模块类型 描述 Svg 承载绘图区域 Circle 圆 Eclipse 椭圆 G 包裹块(个人认为是为了单纯的层次分明) LinearGradient 线性渐变,可以做颜色的线性渐变效果...原创 2019-09-12 09:48:42 · 1228 阅读 · 0 评论 -
RN 添加图标和启动屏 完美适配各种屏幕
https://www.jianshu.com/p/56562e5a9396转载 2019-09-11 11:07:20 · 506 阅读 · 0 评论 -
APP打包所需应用图标的尺寸
https://www.jianshu.com/p/36810205fb18转载 2019-09-11 09:57:55 · 495 阅读 · 0 评论 -
Component和PureComponent的区别
PureComponent通过props和state的浅对比来实现shouldComponentUpdate()。除此之外他们几乎完全相同了。在PureComponent中,如果包含比较复杂的数据结构,当深层的数据发生变化的时候,因为浅对比所以导致界面不会更新。如果定义了shouldComponentUpdate(),无论组件是否是PureComponent,它都会执行shouldComp...原创 2019-09-05 12:02:45 · 1073 阅读 · 0 评论 -
React Native 动画
我们在平时进行Native开发的时候,为了更好的用户体验,我们会做一些动画效果,而在React Native中也提供了相应的动画API。RN主要的动画分为两大类:LayoutAnimation用来实现布局切换的动画。 Animated更加精确的交互式的动画LayoutAnimationLayoutAnimation是在布局发生变化时触发动画的接口,这意味着你需要通过修改布局(比如修...原创 2019-09-04 15:47:32 · 519 阅读 · 0 评论 -
React Native调试技巧
首先在模拟器上运行项目,打开调试菜单 ,选择Debug JS Remotely菜单项。Chrome浏览器会走动启动并打开一个React Native Debugger页面。如下图:按住Ctrl+Shift+J打开DevTools工具,点击下图中的按钮,将项目文件夹添加到soure选项卡中。添加了项目工程文件后,如下图:在需要调试的地方加上断点注意此时已经执行到断点并...原创 2019-08-27 11:37:16 · 325 阅读 · 0 评论 -
Reactnative Android键盘将底部导航栏顶起解决方案
刚学习ReactNative开发,在做一个提交表单的页面,发现当我要输入内容的时候弹出的键盘会把底部导航条顶起来,这样子非常难看,如下图:多方查找资料下,发现一个很好的解决方案,将AndroidManifest.xml文件中找到android:windowSoftInputMode:将其值更改为stateAlwaysHidden|adjustPan其原先的值为更改完后,卸载...原创 2019-05-16 11:23:17 · 3440 阅读 · 0 评论 -
如何自定义一个NavigationBar
一个NavigationBar包含有导航栏和状态栏两个部分。如何自定义React Native组件?1. 首先需要继承React.Componentexport default class NavigationBar extends Component{}2. 实现render方法render(){ return ( <View...原创 2019-05-22 10:22:08 · 388 阅读 · 0 评论 -
React Native自定义组件中的各种属性检查
import {Component} from 'react';import {ViewPropTypes} from 'react-native';import {PropTypes} from 'prop-types';export default class NavigationBar extends Component{ static propTypes = { ...原创 2019-05-30 15:55:45 · 605 阅读 · 0 评论 -
setState()方法使用详解
当需要React Native重新渲染UI时,我们使用最多的应该就是setState函数了。本文对setState的使用做个总结。1.setState介绍React Native框架使用setState函数来合并状态机变量,setState函数的原型是:setState(oldState,callback)setState函数会将传入的函数的返回值与当前的状态机做一个合并操作:...原创 2019-06-26 08:56:25 · 3866 阅读 · 0 评论 -
WebView学习
先来介绍一下它的属性和方法属性 source {uri:string,method:string,headers:object,body:string},{html:string,baseUrl:string},number在WebView中载入一段静态html代码或者url(还可以附带一些header选项)。 contentInset {top:number,left...原创 2019-07-19 17:32:50 · 235 阅读 · 0 评论 -
安卓权限说明
权限 用途 You Package.permission.JPUSH_MESSAGE 官方定义的权限,允许应用接收JPush内部代码发送的广播消息 RECEIVE_USER_PRESENT 允许应用可以接收点亮屏幕或解锁广播 INTERNET 允许应用可以访问网络 WAKE_LOCK 允许应用在手机屏幕关闭后后台进程仍然运行, READ_PHONE...原创 2019-07-24 15:08:03 · 1832 阅读 · 0 评论 -
RN中移除第三方组件
1.要移除组件肯定是要先学会引入了,这里以react-native-vector-icons这个组件为例。yarn add react-native-vector-icons命令执行完毕后 我们在package.json中会有引入的项目。2. 将第三方库链接到项目,运行如下命令react-native link react-native-vector-icons这样我们...原创 2019-07-22 18:26:23 · 1437 阅读 · 0 评论 -
RN (android)集成极光消息推送
安装yarn add jpush-react-nativeyarn add jcore-react-native配置通过主动配置和手动配置组合完成1.自动配置react-native link根据提示,输入appKey(极光中该应用对应的key)完成之后可以查看结果:app目录下的build.gradleandroid目录下的settings.gr...原创 2019-07-23 10:26:45 · 838 阅读 · 0 评论 -
WebStrom配置好git后文件颜色代表的含义
红色 :本地新增文件,(工作区文件)没有关联到git,ctrl+k提交不到git。绿色:由红色add to 转变而成,暂存区文件,ctrl+k可以提交的新增文件。蓝色:文件内容有修改,灰色:本地删除的文件(待删除的文件,远程没删),ctrl+k,ctrl+shift+k提交就没了。...原创 2019-08-01 10:07:55 · 1146 阅读 · 0 评论 -
@react-native-community/async-storage
以前我们都从react-native中导入AsyncStorage,但是React官方说是要讲这个AsyncStorage从react-native中抽取出来,也就是在以后的版本中会将其从react-native包中删除,其建议我们从@react-native-community/async-storage中导入这个组件现在开始安装yarn add @react-native-comm...翻译 2019-05-07 17:25:13 · 12684 阅读 · 2 评论