随笔分类 - React Native
摘要：首先来讲一下，我们必须清楚React Native本质是使用React的思想 只不过React渲染的是真实的Dom,而React Native是使用虚拟Dom通过桥接调用原生的渲染 下面就从index.js的 AppRegistry.registerComponent到AppRegistry.run
阅读全文
摘要：React Native中跟定时器相关的有这三种API // 立即执行，仅执行一次 setImmediate: (callback: (...args: any[]) => void, ...args: any[]) => Immediate; // 间隔多久执行，执行多次（轮播图） setInte
阅读全文
摘要：项目中我们经常会使用到函数，经常会遇到调用的问题， 比如到底什么时候加()什么时候不加()? 比如this变null 或者绑定事件失效等等，下面我们就详细来讲讲，以ES6来讲 一、函数分类 先简单分为普通函数和箭头函数 简单示例下 // 箭头函数 callArrow = (str: string)
阅读全文
摘要：FlatList是我们项目中经常使用的一个组件， 下面简述下使用中要注意的问题 一、keyExtractor keyExtractor的唯一性 /** * Used to extract a unique key for a given item at the specified index. Ke
阅读全文
摘要：项目中我们经常会遇到如下写法 bind(this) //列表显示控件 renderItem={this.renderUserItem.bind(this)} 那么对于一个函数的调用我们到底什么时候需要.bind(this)，什么时候不需要.bind(this)呢？ 先说结论： bind(this)主
阅读全文
摘要：我们在项目中会有很多调试方法，一般我们用warn、alert等等都可以， 但有时我们需要跟着流程定位问题，那么此时我们就需要使用断点调试了，当然别的方式也可以，只不过断点更加简单 下面简述下使用React Native Tools实现 1、首先在应用商店找到React Native Tools然后安
阅读全文
摘要：React Native中我们经常会使用到成员变量，一般我们会使用this来访问成员变量， 但有时我们会发现constructor中我们给成员变量赋值，但是在constructor外我们取到的值却和constructor中赋的值不一样？ 先看运行效果：我们会发现内外的this访问的成员变量的值是不一
阅读全文
摘要：Modal大家都比较熟悉，关于它的onRequestClose属性到底是起什么作用,我们到底要不要实现它？ 官方文档上要求Android平台必须实现，那是为什么呢？ /***“onRequestClose”属性允许传递一个函数，该函数将在模式被取消后调用。*在Android平台上，这是一个必需的功能
阅读全文
摘要：针对弹窗之前已讨论过两种 1、系统的Alert、 2、Ant Design React Native库中的Modal.alert 但这两种都各有自己的局限性，所以现在我么就使用用Modal来自定义实现弹窗 一、Modal Modal组件可以用来覆盖包含React Native根视图的原生视图（如UI
阅读全文
摘要：之前谈到过项目中的弹窗使用系统的Alert的局限性， 那么在Ant Design Mobile RN这个三方库中， 使用Modal.alert自定义了alert（本质就是使用Modal自定义alert，和系统的Alert没有任何关系，仅仅是看起来相似而已）,灵活了很多，可以进行UI的定制 Modal
阅读全文
摘要：项目中我们经常会遇到弹框提示的问题，这个系统本身是有的就是Alert， 但Alert是有局限性的，他的title和message都是string类型的，AlertButton的text也是string类型的 * // Works on both iOS and Android * Alert.ale
阅读全文
摘要：我们在使用原生做跳转的时候， 当我们针对一个页面对象做push操作时，每一次push我们都会创建一个新的页面对象， 换言之，导航栈里可能有同一个类的无数个对象 但对于React Native来说， 当我们针对一个页面对象做push操作时，如果导航栈里没有这个对象，会执行push操作， 但如果栈里已经
阅读全文
摘要：我们经常会在代码中发现=>(箭头函数)，那么什么是箭头函数呢？ 其实箭头函数类似iOS的block（回调），安卓的回调，JS的匿名函数（简化了函数定义） 简介： ES6标准新增了一种新的函数：Arrow Function（箭头函数）。 所以你的浏览器首先要支持ES6的Arrow Function。
阅读全文
摘要：JavaScript有两个表示”无”的值：undefined和null。 undefined 表示”缺少值”，就是此处应该有一个值，但是还没有定义。例如，变量被声明了，但没有赋值，那么就是undefined。 转换为数值为：NaN null 表示一个值被定义了，但是它是空值。 转换为数值为：0 备注
阅读全文
摘要：在iOS的世界里，视图是有生命周期的，比如视图加载，视图将要出现，或者视图销毁等阶段， 同理在React Native的生命周期里也是有类似阶段的，网上有很多例子，过程叫法也不太一样， 个人感觉总体是三个阶段： 挂载阶段、运行阶段、卸载阶段 一、挂载阶段 视图从创建 >初始化 >加载完成阶段， 类似
阅读全文
摘要：项目中有时我们会遇到如下错误： Invariant Violation: Text strings must be rendered within a <Text> component. 解决办法： 仔细检查代码，一般该错误都是语法错误引起 示例： 查找许久，终于找到了原因： 原来是语法错误，多写了
阅读全文
摘要：针对justifyContent、alignItems、alignSelf、alignContent这几个属性， 我们经常使用的是justifyContent、alignItems，我们可以了解下alignSelf、alignContent flexDirection 谈到布局我们从原生讲起，在iO
阅读全文
摘要：项目中我们经常会遇到子组件和父组件垂直水平居中的问题，那么我们如何实现这个效果呢？ 方法有很多种，下面以自定义按钮为例简述下实现方法， A：主要使用这个来实现（相当于水平垂直居中）： justifyContent: 'center', alignItems:'center', 首先要理解justif
阅读全文
摘要：某些情况下组件内直接取实体属性会报如下错误 TypeError：undefined is not an object(evaluating 'this.props.userBaseVo.userName') 此时就需要用三目?: (this.props.userBaseVo ? this.props
阅读全文
摘要：项目中我们经常会遇到标签的样式，那么我们如何自定义呢？ 起初想直接使用Text设置间距不就可以了， 然而实测发现Text组件设置borderRadius、borderTopRightRadius等圆角是不会生效的，圆角需要设置在View上 所以我们的方案就是View包裹Text。用View设置圆角，
阅读全文
