React-Native

React-Native

React Native 触摸事件处理详解

触控是移动设备的核心功能，也移动应用交互的基础，Android 和 iOS 各自都有完善的触摸事件处理机制。React Native（以下简称 RN）提供了一套统一的处理方式，能够方便的处理界面中组件的触摸事件、用户手势等。本文尝试介绍 RN 中触摸事件处理。 1. RN 基本触摸组件 RN 的组件除了 Text，其他组件默认是不支持点击事件，也不能响应基本触摸事件，所以 RN 中提供了几个直接处理响应事件的组件，基本上能够满大部分的点击处理需求TouchableHighlight, TouchableNativeFeedback, TouchableOpacity 和 TouchableWithoutFeedback。因为这几个组件的功能和使用方法基本类似，只是 Touch 的反馈效果不一样，所以一般我们用 Touchable** 代替。Touchable** 有如下几个回调方法： * onPressIn：点击开始； * onPressOut：点击结束或者离开； * onPress：单击事件回调； * onLongPress：长按事件回调。 它们的基本使用方法如下，

React-Native

React Native 中 ScrollView 性能探究

1 基本使用 ScrollView 是 React Native（后面简称：RN） 中最常见的组件之一。理解 ScrollView 的原理，有利于写出高性能的 RN 应用。 ScrollView 的基本使用也非常简单，如下： <ScrollView> <Child1 /> <Child2 /> ... </ScrollView> 它和 View 组件一样，可以包含一个或者多个子组件。对子组件的布局可以是垂直或者水平的，通过属性 horizontal=true/false 来控制。甚至还默认支持“下拉”刷新操作。另外还有一个特别赞的特性，超出屏幕的 View 会自动被移除，从而节省资源和提高绘制效率。我们来看如下一个例子： class

React-Native

React Native 中组件的生命周期

概述 就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图： 如图，可以把组件生命周期大致分为三个阶段： * 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化； * 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面； * 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。 生命周期回调函数 下面来详细介绍生命周期中的各回调函数。 getDefaultProps 在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState()，来初始化组件的状态。 componentWillMount 然后，准备加载组件，会调用 compon

Android

React Native for Android 发布独立安装包

昨天发布了 ZhiHuDaily-React-Native 项目，有不少人问有没有 APK 包来体验一下。做了 React Native Android 开发的话，就会知道，开发的时候必须启动个 JS Server，然后要让手机连接这个 Server，否者会出现那个"吓人"的红色屏幕。这个我在第一篇 React Native 文章中就提到过。 如果要发布一个 React Native 写的 Android 应用，不可能要别人来连接这个 JS Server。可不可以不要连接这个 Server 就能运行呢？在网上找了一圈，发现资料很少，官方文档上也没有说支持。这篇文章就来讨论一种实现方案。 原理探究 我们来看一下 RN 应用连接这个 JS Server 干了啥事情？第一次运行应用的时候，

Android

React Native for Android 实践 -- 实现知乎日报客户端

React Native for Android 的发布，对一个 Android 开发者来说还是有相当的吸引力的。通过前面这篇博客：React Native for Android 入门老虎好不容易入了门了，然后想找一个简单的项目，来练练手。一方面来熟悉一下 RN（React Native, 后面都做此简写），另一方面来验证使用 RN 来实现一个相对完整的项目的可行性。 平时用的最多的客户端之一：知乎日报，这个 APP 相对简单，而且也找到了有人分析的知乎日报 API 分析。就选择它了：实现一个 React Native 版的知乎日报客户端，目标是尽量实现官方客户端一致的效果。 这篇文章主要讲使用 RN 来实现知乎日报客户端的可行性和实现方法。整个项目开源在 GitHub 上：ZhiHuDaily-React-Native，欢迎 Star 和 PR。 基本概念

Android

React Native for Android 入门老虎

昨天期待已久的 React Native for Android 发布了，赶紧来尝试一下，我跟着这个 Getting Started 开开始入门。发现被一些 "老虎" 堵在门口， Hello World 都跑不起来，入不了 React Native 的门，让我很懊恼，最后终于解决。可能大家也会遇到类似的问题，这篇文章希望能帮到你。 安装环境 根据官方的入门文档，需要安装 Homebrew, nvm, Node.js 4.0, watchman, flow。 首先 Homebrew 大家应该都安装好了，这里就不说了。接下来实用 brew 安装 nvm： $ brew install nvm 然后会提示你把