React Native

<img src="http://static-r.msparis.com/uploads/banners/2/a/2aa5a9ecba9d1f4ebad143902c8c1ceb.jpg!w750" width="100%"/> 前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。 使用 Taro ，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、React-Native 等）运行的代码。 该项目基于Taro，构建了一个时装衣橱的项目演示，涉及了一个电商平台完整的业务逻辑和功能点，如果这个项目能驾驭的了，相信大部分公司的其他React项目也就不在话下。 效果演示 查看demo请戳这里 （请用chrome手机模式预览） H5版 && 微信小程序版 <img src="https://gitee.com/easytuan/taro-msparis/raw/master/screenshots/qr-code.png" width="250"/> <img src=

React Native之获取通讯录信息并实现类通讯录列表(ios android) 一,需求分析 1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用。 2,获取通讯录信息,实现类通讯录,可拨打电话 发短信等。 二,技术介绍与配置 2.1 技术介绍 1, react-native-contacts地址 :https://www.npmjs.com/package/react-native-contacts 2,下载安装： npm install react-native-contacts --save 3,自动链接： react-native link react-native-contacts 4,react-native-contacts API介绍： getAll(callback)——以对象数组的形式返回所有联系人 getAllWithoutPhotos——和getAll在安卓系统上是一样的，但是在iOS系统上它不会返回联系人照片的uri(因为创建这些图片会带来很大的开销) getPhotoForId(contactId, callback)——返回联系人照片的URI(或null) openContactForm (contact, callback)——在contactsUI中创建一个新的联系人并显示。添加一个联系人到通讯录。 updateContact

#PureMan6博客目录 一、Scrum Meeting 1、Alpha 【Alpha】Scrum meeting 1 【Alpha】Scrum meeting 2 【Alpha】Scrum meeting 3 【Alpha】Scrum meeting 4 【Alpha】Scrum meeting 5 【Alpha】Scrum meeting 6 【Alpha】Scrum meeting 7 【Alpha】Scrum meeting 8 【Alpha】Scrum meeting 9 【Alpha】Scrum meeting 10 【Alpha】Scrum meeting 11 2、Beta 【Beta】Scrum meeting 1 【Beta】Scrum meeting 2 【Beta】Scrum meeting 3 【Beta】Scrum meeting 4 【Beta】Scrum meeting 5 【Beta】Scrum meeting 6 【Beta】Scrum meeting 7 【Beta】Scrum meeting 8 【Beta】Scrum meeting 9 【Beta】Scrum meeting 10 3、Gamma 【Gamma】Scrum meeting 1 【Gamma】Scrum meeting 2 【Gamma】Scrum meeting 3

一、简介 Hybrid Development混合开发是目前移动端开发异常火热的新兴技术，它能够实现跨平台开发，极大地节约了人力和资源成本。跨平台开发催生了很多新的开源框架，就目前而言，在混合开发中比较流行的有FaceBook开源React Native，有Goggle开源的Flutter。React Native实现的是通过下发JS脚本的方式达到JS与Native交互。Flutter实现的则是通过采用现代响应式框架来构建UI，Flutter与ReactiveCocoa框架配合使用最佳。当然开发者也可以在Native中内嵌WebView的方式(WebKit)实现混合开发。虽然方式不同，但目的相同，都是跨平台，殊途同归吧。对跨平台有了粗略的了解后，再来看看iOS系统中对JS与Native是如何交互的，其实，系统是给开发者提供了一个极其强大的框架来实现这个功能的，即JavaScriptCore框架。这个框架通过定义JSValue值对象和声明JSExport协议作为桥梁完成Native与JS的通信。JS虽然是单线程语言，但是iOS是支持多线程执行任务的，开发者可以在异步情况下执行任意一个环境的JavaScript代码。大概结构图如下： 二、分析 参考这上图，可以看出JavaScriptCore框架结构还是很清晰的，JavaScriptCore中有那么几个核心的类在开发者是很常用的

react native组件的生命周期 一、当页面第一次加载时，会依次调用： constructor() componentWillMount() ： 这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。 render() ：组件渲染 componentDidMount() ：虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 componentDidMount() ，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval ，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。 二、页面状态state更改时： 例子，点击页面组件，数字加1: constructor(props) { super(props) console.log('_____constructor_____') this.state = { count: 0 } } render() { console.log('___render___') return ( <View> <Text onPress =

亲自经历react-native从0.55升级到0.58的过程，有点坎坷，ios出现的问题还算不多，但是android这里，随着gradle和buildTool的使用升级，导致第三方插件出现各种问题，大部分就能够修改 报错内容 我这里报错的插件有两个 react-native-fetch-blob react-native-orientation 在node_modules文件夹下找到插件位置， android/build.gradle可以看到： 主要是 compileSdkVersion buildToolsVersion minSdkVersion targetSdkVersion 这几个配置冲突的问题吧，修改为 android { compileSdkVersion rootProject.ext.compileSdkVersion buildToolsVersion rootProject.ext.buildToolsVersion defaultConfig { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a",

react-native在启动的时候会有瞬间的白屏出现，ios白屏时间会很短，安卓要相对长一些，大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面，这段时间界面是一个空View. 上面的过程我们称之为项目的初始化，那么在这段项目初始化的过程中我们为了有更好的用户体验需要渲染一个对用户友好的界面来代替白屏，毕竟白屏对用户不太友好，你可以理解为跟h5中的loading是一个意思。然而配置原生的启动图不像我们加个loading那么简单，react-native-splash-screen帮我们封装了大部分配置，我们需要做部分的集成就可以使用，以下是配置教程： 一、下载 react-native-splash-screen: 在项目根目录运行终端执行以下命令 yarn add react - native -splash -screen 或者 npm install react - native -splash -screen --save 特别注意 目前npm5存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作； 二、安装： 运行终端执行以下命令进行自动安装 react - native link react - native -splash -screen 三

react-native-fast-app 是一款为React Native App快速开发提供基础服务的纯JS库( 支持 IOS & Android )，特别是在从0到1的项目搭建初期，至少可以为开发者减少30%的工作量。 react-native-fast-app 主要做了这些工作： 1. 对AsyncStorage进行封装，开发者只需几行代码即可实现一个持久化数据管理器。 2. 对fetch进行封装，使得开发者只需关注当前App的前后台交互逻辑和协议，定义好参数设置及解析逻辑即可。 3. 重新封装了RN的View、Text、Image、FlatList 使用得这些控件在适当的时候支持事件或支持icon与文本，能有效减少布局中的嵌套逻辑。 4. 通过设置一个屏幕参考尺寸，重置RFView、RFText、RFImage的尺寸，实现自动多屏适配 可能有人觉得，RN的适配一般不都是根据目标屏幕的尺寸对当前UI尺寸进行一定比例的缩放么，直接定义一个获取缩放比例的方法不就可以了么？ 一千个人心中，有一千个哈姆雷特，也许我的封装思路能给你带来不一样的启发也未可知呢？ UI多屏幕适配 RN平台默认的尺寸就是不带单位的，使用的是设备独立像素，但由于手机的尺寸也越来越多，比如说相同尺寸，像素密不同结果导致UI的物理尺寸也不同，所以通常来说，我们们需要根据屏幕的尺寸对UI的尺寸进行一定比例的缩放。

在上一篇介绍了 React Native开发环境搭建 ，我们已经可以在本地成功运行一个helloword应用了，本节将开始详细分析如何搭建一个React Native App应用架构，并支持完整本地运行预览。 完整代码见github 欢迎访问我的个人博客 前言 现在已经有很多脚手架工具，如 ignite ，支持一键创建一个React Native App项目结构，很方便，但是享受方便的同时，也失去了对项目架构及技术栈完整学习的机会，而且通常脚手架创建的应用技术架构并不能完全满足我们的业务需求，需要我们自己修改，完善，所以如果希望对项目架构有更深掌控，最好还是从0到1理解一个项目。 项目结构与技术栈 首先使用 react-native-cli 工具创建一个React Native应用： react-native init fuc 生成项目结构如下图： andorid和ios目录分别存放对应原生平台代码; package.json 为项目依赖管理文件； index.ios.js 为ios平台入口文件， index.android.js 为android平台入口文件，通常用来注册React Native App根组件； .babelrc 文件，babel的配置文件，React Native默认使用babel编译JavaScript代码； __tests__ 项目测试目录。

最新版本的react-native中，官方表示将要移除 AsyncStorage，推荐使用@react-native-community/async-storage，好吧官方经常这么干 按照官方提示 yarn add @react-native-community/async-storage react-native link @react-native-community/async-storage 好吧，果然不负众望的报错了 错误信息如下 info Starting JS server... info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)... > Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug' . > com.google.gson.stream