麦溪·在路上

[TOC] React Native 提供了一些内置的组件。你可以在网站的左侧看到组件的完整列表。如果你不知道从哪看起，那么可以先看一下下面这个简单的分类： 基础组件 交互控件 列表视图 iOS 独有组件 Android 独有组件 其他 需要说明的是，你不会被局限在这些内置组件上。React Native 是大开源社区的作品，所以你还可以在 github 或是 npm 上搜索到带有react native关键字的大量的第三方组件。 基础组件大多数应用都会用到这里的基础组件。如果你是新手的话，那更应该先好好熟悉一下这些组件： View:搭建用户界面的最基础组件。 Text:显示文本内容的组件。 Image:显示图片内容的组件。 TextInput :文本输入框。 ScrollView:可滚动的容器视图。 StyleSheet:提供类似CSS样式表的样式抽象层。 交互控件提供一些常见的跨平台的交互控件。 Button:一个简单的跨平台的按钮控件。 Picker:在iOS和Android上调用各自原生的选择器控件。 Slider:滑动数值选择器。 Switch:开关控件。 列表视图和一般 ...

[TOC] 概述有时候 App 需要访问平台 API，但 React Native 可能还没有相应的模块包装；或者你需要复用一些 Java 代码，而不是用 Javascript 重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。 我们把 React Native 设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。这是一个相对高级的特性，我们并不认为它应当在日常开发的过程中经常出现，但具备这样的能力是很重要的。如果 React Native 还不支持某个你需要的原生特性，你应当可以自己实现该特性的封装。 开启 Gradle Daemon我们建议开启Gradle Daemon来加速 Java 代码编译。 Toast 模块本向导会用Toast作为例子。假设我们希望可以从 Javascript 发起一个 Toast 消息（一种会在屏幕下方弹出、保持一段时间的消息通知）。 我们首先来创建一个原生模块。一个原生模块是一个继承了ReactContextBaseJavaModule的 Java 类，它可以实现一些 JavaScrip ...

[TOC] 概述文章参考：https://cloud.tencent.com/developer/article/1005415 本文主要介绍react-native通用化建设以及对react-native项目进行性能优化的方案，总体来讲主要围绕以下几个方面展开： React Native通用化建设 React Native bundle本地分包 React Native项目线上性能分析 React Native项目首屏加速和性能优化 React Native通用化建设React Native通用化建设主要做了一下几个方面的事情： react-native线上离线包优化机制 为了实现React-Native线上项目react-native版本与h5版本的自由切换，同时合理地管理好不同项目不同版本的react-native离线包与h5离线包，我们的方案是将h5离线包和react-native bundle文件打在同一个离线包中(放在同一个bid号的离线包中)。 若后台url地址下发中携带md=rn字段，同时离线包中可以检测到react-native bundle文件并且ap ...

[TOC] 概述编译环境官方的编译环境要求如下，值得注意的是这里的NDK版本最好是r10e，亲测过其他两个版本的NDK并没有成功，因此这里最好是下载r10e版本的NDK。 Android SDK version 23 (编译SDK版本号在build.gradle中可以找到) SDK build tools version 23.0.1(编译工具版本号在build.gradle中可以找到) Android Support Repository >= 17 Android NDK r10e下载地址:https://developer.android.com/ndk/downloads/revision_history.html 将Gradle指向你的安卓SDK: 设置$ANDROID_SDK和$ANDORID_NDK为对应的目录，或者按照以下内容在react-native根目录下创建local.properties文件（注意：windows下需要使用反双斜杠）。 12sdk.dir=/Users/frewen/Library/Android/sdkndk.dir=/Us ...

[TOC] 概述文章参考：https://www.jianshu.com/p/5c070a302192 注意了，如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误，可能是大家使用了 yarn install 命令导致的，解决这个错误的办法就是将nodemodules删除，然后重新使用npm install命令来安装，最后使用 npm start 来起服务，应该就不报错了。如果还有报错，请加作者交流群，将问题反馈到群里，谢谢。 一、概述react-navigation 组件是官方推荐使用的导航组件，功能和性能都远远的优于之前的Navigator组件，公司的RN项目最早是使用的react-native-router-flux导航组件，因为那个时候react-navigation 组件还没有出来，在使用了react-navigation后，感觉比react-native-router-flux组件有更加强大的功能，体验也略好些，这两个导航组件是目前star最多的导航组件，并且他们都完美的支持与Redux框架的结合使用，推荐小伙伴们两个组件都尝试使用下。 r ...

[TOC] 概述静态图片资源React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它： 1<Image source={require('./my-icon.png')} /> ==注意，一些老文章和教程提到的require(‘image!xxx’)的写法已经从 0.40 版本开始不再支持！== 图片文件的查找会和 JS 模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个图片，Packager 就会去这个组件所在的文件夹下查找my-icon.png。并且，如果你有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件。 你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构： 123456.├── button.js└── img ├── chec ...

[TOC] 概述移动应用基本不会只由一个页面组成。管理多个页面的呈现、跳转的组件就是我们通常所说的导航器（navigator）。 本文档总结对比了 React Native 中现有的几个导航组件。如果你刚开始接触，那么直接选择React Navigation就好。 React Navigation 提供了简单易用的跨平台导航方案，在 iOS 和 Android 上都可以进行翻页式、tab 选项卡式和抽屉式的导航布局。 如果你想同时在iOS和Android上达到看起来像原生，或者你想把RN整合到一个已经有原生导航管理的APP里, 下面这个库提供了在两个平台都适用的原生导航: react-native-navigation. React Navigation社区今后主推的方案是一个单独的导航库react-navigation，它的使用十分简单。React Navigation 中的视图是原生组件，同时用到了运行在原生线程上的Animated动画库，因而性能表现十分流畅。此外其动画形式和手势都非常便于定制。 要想详细了解 React Navigation的具体用法，请访问其官方网站，网站右上 ...

[TOC] 概述文章参考：https://github.com/dwqs/blog/issues/41 流畅、有意义的动画对于移动应用用户体验来说是非常重要的。现实生活中的物体在开始移动和停下来的时候都具有一定的惯性，我们在界面中也可以使用动画来实现契合物理规律的交互。React Native 提供了两个互补的动画系统：用于创建精细的交互控制的动画Animated和用于全局的布局动画LayoutAnimation。 AnimatedAnimated使得开发者可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。Animated旨在以声明的形式来定义动画的输入与输出，在其中建立一个可配置的变化函数，然后使用简单的start/stop方法来控制动画按顺序执行。 Animated仅封装了四个可以动画化的组件：View、Text、Image和ScrollView，不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件。下面是一个在加载时带有淡入动画效果的视图： 123456789101112131415161718192021 ...

[TOC] 概述数据持久化就是指应用程序将某些数据存储在手机存储空间中 借助native存储这种方式不言而喻,就是把内容传递给native层,通过原生API存储。 AsyncStorage APIRN框架为开发者提供了 AsyncStorage API，开发者可以利用它将任意“字符串键值对”保存到存储空间中。 它是简单的，异步的。用它可以取代Android的sharedperference和ios的NSUserDefault。 AsyncStorage存储的数据对该RN应用全局都是可以访问的，只需要知道通过它增删改查数据就可以了。 写入数据开发者可以通过静态函数setItem来存储数据。setItem的JavaScript原型是： 1static object setItem(key, value,aCallBack) 写入数据有好几种方式，直接看代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344// 构造 constructor(props) { ...

[TOC] 概述