theScoreONE的博客

准备 1、全局安装webpack：npm install webpack -g 1、添加webpack包：npm install webpack --save-dev安装Webpack配置WebpackWebpack使得我们可以使用Node.js的CommonJS规范来编写模块一、webpack.config.js基本配置项1、webpack.config.js文件中需要定

1、react-native集成微信支付https://www.jianshu.com/p/a414cad81c9a

在info.plist中倒数第三行(上面)添加：<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>参考链接：http:

Bugly 技术干货系列内容主要涉及移动开发方向，是由 Bugly 邀请腾讯内部各位技术大咖，通过日常工作经验的总结以及感悟撰写而成，内容均属原创，转载请标明出处。【React Native For Android】 Java本文从源码角度剖析 RNA 中 Java 对于传统 Java一、Module Registry在 RNA 中，在应用启动时根据 R

原文地址React Native 性能优化之可取消的异步操作本文出自《React Native 研究与实践》系列文章。概述在项目开发中离不了的需要进行一些异步操作，这些异步操作在改善用户体验的同时也带来了一些性能隐患。 比如，在某页面进行异步操作，异步操作还没有完成时，该页面已经关闭，这时由于异步操作的存在，导致系统无法及时的回收资源，从而导致性能的

原文链接项目背景公司的最新的一个项目像使用ReactNative进行开发，首先是要进行相关的技术调研。之前公司的项目使用的是H5开发，当时我并没有参加，但是调研ReactNative的时候被告知，需要能实现ReactNative的热部署，貌似H5就可以支持热部署。进过几天的挣扎和疯狂的翻阅google的资料并且查找各种博客，终于找到了如何让ReactNative项目实现热部署的方法

React Native跳转微信、支付宝等第三方APP一、常用URL SchemeQQ: mqq:// 微信: weixin:// 新浪微博: weibo:// (sinaweibo://) 腾讯微博: tencentweibo:// 淘宝: taobao:// 支付宝: alipay:// 美团: imeituan:// 知乎: zhihu:// 优酷: youku://二、配置S

1、React Native 中 ScrollView 性能探究

一、modal无法正常启动/关闭原因：同一个页面有两个modal, 处理逻辑刚好是关闭第一个的同时开启第二个，导致第二个无法正常启动/关闭 解决方案：避免同时操作两个modal，第二个modal应延迟几百毫秒后操作

封装 Navigator好吧， 这步其实和下面讲的没有什么关系，不过为了看下面内容的时候不会混淆，这里还是简单说下。React Native 提供了两个导航组件，NavigatorIOS 和 Navigator。 NavigatorIOS 封装程度比较高，比较好用，但是只能在 iOS 上用，Navigator 相对封装程度比较低，但是为了以后能方便的给 Android 用，我们还是封装一下

一、Text文本单行显示多的部分….来省略//'head'->"...wxyz";'middle'->"ab...yz";'tail'->"abcd...";'clip'->ellipsizeMode="tail" numberOfLines={1}

github地址 中国省-市-区WheelPicker选择器的RN组件.propTypesisVisible: PropTypes.bool,selectedProvince: PropTypes.string,selectedCity: PropTypes.string,selectedArea: PropTypes.string,navBtnColor: PropTypes.strin

一、环境配置1、下载并安装Node.js,  Node.js官网2、React Native的命令行工具(react-native-cli)npm install -g react-native-cli可能会出现权限问题EACCES: permission denied， 在上面命令行前加sudo, 回车后输入开机密码安装3、开发工具（1）安

一、省略return的写法const concatFunc = (objA) => [...objA, 0];//相当于const concatFunc = (objA) => { return [...objA, 0];}二、传参时参数中默认值 1、ES6const counter = (state = 0, action) => { switch (actio

复合 本质上是对组件的一种组织、管理方式，实现代码的封装 Mixin(混入)：就是将抽离出组件相同逻辑处理部分混入到组件中，实现代码的复用一、组件嵌套  想要在父组件中嵌套子组件，和引用HTML标签一样， ... 或 【注意1】render中return的HTML标签都必须有个最外层的标签包裹 【注意2】子组件必须包裹在一个HTML标签内//正确的写法var Chi

一、无约束(不可控)组件和约束组件(可控)介绍约束组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的。 1、无约束组件。直接给定组件一个defaultValue值<input type="text" defaultValue="Hello World!" ref="helloTo" />//通过ref获取input的值var inputValu

React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组件的

《一》、快速入门一、必备资源下载：http://facebook.github.io/react/docs/getting-started.html react.js是 React 的核心库react-dom.js提供了与 DOM 相关的功能browser.min.js将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。<script

《一》、理解JSX  JSX即Javascrpt XML— — 一种在React组件内部构建标签的类XML语法。   JSX并不是新语言，也没有改变JavaScript的语法，只是一种基于ECMAScript的新特性，一种定义带属性树结构（DOM结构）的语法   React 可以不使用 JSX 来编写组件，但是使用 JSX 可以让代码可读性更高、语义更清晰、对 React 元素进行抽象等等。一、

组件可以包含属性和状态。属性（props）：类似 HTML 中的属性，在绘制的时候可以直接在标签中添加属性，然后在组件中通过 this.props.属性名 获取。props属性是父组件控制子组件的单向数据流传输的关键；状态（state）：维护组件内部的状态。一个组件就是一个状态机。React 把用户界面当作简单状态机，把用户界面想像成拥有不同状态然后渲染这些状态。在 React 中，一旦组件的

Airbnb React/JSX Style Guide可能是React和JSX最合理编码规范基本规则(Basic Rules)单个文件只包含一个React组件单个文件可以有多个Stateless无状态组件组合，或多个纯组件尽可能使用JSX语法不要使用React.createElement，除非是从非jsx文件来初始化app创建组件Class vs React.createClass vs

原文链接说 React 组件间通讯之前，我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目，那我们项目应该有如下类似的关系：父子：Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1兄弟：Child_1 与 Child_2、Child_1_1

一、实用用法1、打开多个窗格, 可用于对比查看代码. View -> Panes -> Split Xxx二、快捷键1、快速查找文件：cmd + p. a: 输入文件名搜索. b: 输入目录 + 文件名搜索.2、切换多个页签窗口. 使用cmd + [1,2,3...]切换到第几个页签. 如： cmd + 3 切到第三个窗口.3、新建空文件: cmd + n4、选择同名标签, 批

二、JSX《第二章源码》demo1 - 7 React使用原生Javascript版本React使用JSX语句React自动识别{}，当javascript处理React子节点this.props.childrenJSX中嵌入javascript;如：条件判断、使用变量、使用函数、使用逻辑与(&&)、使用逻辑或(||)React非DOM属性(key、ref、dangerouslySet

《一》、使用gulp构建React应用一、React项目结构.gulpfile.js./src .index.html /js .App.js .Child.js .Parent.js二、代码 index.html 和 js目录下的三个jsx文件如下//index.html<!DOCTYPE html><html><head>

在组件的整个生命周期中，随着该组件的props或者state发生改变，它的DOM表现也将有相应的变化。一个组件就是一个状态机；对于特定的输入，它总会返回一致的输出。 React为每个组件提供的生命周期分三个阶段： 一、实例化：getDefaultProps：初次创建才会被调用，后续应用不会再出现getInitialState：获取 this.state 的默认值，初始化组件的状态compo