关注
分享
文章平均质量分 75
Facebook公司工程师推出了React Native, 将移动平台上的应用开发统一到同一个框架下,而且还能享受原生体验。
一次学习，就可以同时开发IOS和Android两个平台, 一起学习探讨吧
于连林520wcf
其实我只是一个程序猿
展开
-
[React Native] mcloud-mobile 组件发布
在前端的开发过程中，我们时常会使用一些第三方的组件库。1这些组件库给我们的开发提供了许多便利，但是也在一定程度上限制了开发与设计。为了打破这些限制，同时使用组件化开发的思想来优化与规范开发与设计，从而使产品能够在细节上更加优美，我们在8.0版本开发之初开发了一套通用化的组件库 mcloud-mobile 。组件库涵盖了我们开发过程中经常用到的Button，List，Modal等近二十种组...原创 2019-10-22 14:49:07 · 340 阅读 · 0 评论 -
从零学React Native之14 网络请求
通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式。 node-fetch是RN推荐的请求方式。 React Native框架在初始化项目时, 引入了node-fetch包 (因为npm3把依赖全部摊平了,node-fetch就在node_modules目录下)下面就是项目中引入的node-fetch的源码:联网联网分为发送请求和接受响应两步。分开来分析下。发送请求发送原创 2016-09-21 11:28:52 · 2518 阅读 · 0 评论 -
[React Native]获取网络状态
使用React Native，可以使用NetInfo API获取手机当前的各个网络状态。 componentWillMount() { NetInfo.fetch().done((status)=> { console.log('Status:'+status); }); }获取网络状态是异步的,上面使用了Promise机制。An原创 2016-09-19 16:33:49 · 3390 阅读 · 0 评论 -
[React Native]升级React Native版本
React Native正式版本还没发布，但是小版本基本上每个月都更新1-2次。9月11号又更新了0.33版本，其中有两个增强功能正好是项目中用到的.添加Android6.0权限验证API Add JS library for requesting Android M Permissions (0fb2ccf) - @cmcewenAndroid对话框可以设置cancelable选项 Im原创 2016-09-13 16:39:33 · 1315 阅读 · 0 评论 -
[React Native]去掉WebStorm中黄色警告
用WebStorm开发RN难免会碰到一大堆黄色警告。就像下面这样。 其实这个错误并不会影响开发，但是作为一个上升处女座的，我很难忍。于是各种想办法。 上网查了半天发现这篇文章 http://blog.csdn.net/gz_jero/article/details/51503374 按照上面的这篇文章做，然后发现作用不是很大，只能去掉很少的警告。无意间，在一个开发群里寻找到了解决办法，给原创 2016-09-13 11:04:05 · 16457 阅读 · 4 评论 -
[React Native]Promise机制
React Native中经常会看到Promise机制。 Promise机制代表着在JavaScript程序中下一个伟大的范式。可以把一些复杂的代码轻松撸成一个串，和Android中的rxjava非常像。Promise代表一个任务结果，这个任务有可能完成，有可能没有完成。Promise模式唯一需要的一个接口是调用then方法，用来注册当Promise完成或者失败时调用的回调函数。一般异步函数用到了原创 2016-09-09 16:22:56 · 2312 阅读 · 0 评论 -
从零学React Native之13 持久化存储
数据持久化就是指应用程序将某些数据存储在手机存储空间中。借助native存储这种方式不言而喻,就是把内容传递给native层,通过原生API存储，详见从零学React Native之05混合开发AsyncStorage APIRN框架为开发者提供了 AsyncStorage API，开发者可以利用它将任意“字符串键值对”保存到存储空间中。它是简单的，异步的。用它可以取代Android的sharedp原创 2016-09-08 17:19:02 · 4337 阅读 · 0 评论 -
从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。ES6语法和之前的ES5语法有所变化，本篇文章是根据ES6语法写的。在ES5语法中，有getDefaultPropTypes这个函数，这个函数在组件被创建时，调用一次，它的返回值成为了this.props的初始值。而ES6语法中原创 2016-09-07 14:17:32 · 1088 阅读 · 0 评论 -
[React Native] 解析JSON文件
在编写代码时,开发者有时需要存储一些比较多，在应用程序运行时不需要更改的数据。文件大不便于写在代码中，可以把这些数据存储到JSON文件中。优点非常明显： 1. 数据存放在单独的文件中，代码精简有条理。 2. JSON数据格式便于阅读，修改。给大家演示下，在项目目录下建立一个名为data的目录，在data目录下创建一个名为Student.json的文本文件：{ "student":[原创 2016-09-07 14:03:17 · 6437 阅读 · 0 评论 -
[React Native]访问操作系统剪贴板 Clipboard
我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字。 React Native为开发者提供了 Clipboard API,Clipboard 组件可以在iOS和Android的剪贴板中读写内容。目前还只支持获取或者存放字符串。主要方法static getString() 获取剪贴板的文本内容，返回一个Promise(后面会介绍) 你可以用下面的原创 2016-08-31 16:29:47 · 3517 阅读 · 0 评论 -
[React Native]高度自增长的TextInput组件
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性。在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下： 这时候我们需要自定义一个组件： 在项目中创建AutoExpandingTextInput.jsimport React, {Component} from 'react';import {AppR原创 2016-08-31 15:03:52 · 2114 阅读 · 0 评论 -
[React Native]StatusBar的使用
StatusBar是React Native 0.20 新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性。虽然说是跨平台的组件, 但是有些属性不是跨平台的 ,我们需要注意下。因为IOS和Android本身有些区别,使用这个组件最好都要适配的。属性 属性名 描述 animated 布尔类型,用来设定颜色样式改变或者隐现时是否有动画,默认false hidden 布尔原创 2016-08-30 16:02:56 · 3338 阅读 · 0 评论 -
React Native-组件的引用
之前文章中，我们使用了许多React Native组件，也定义了一些组件。但是我们都没有定义组件的标识，我们都是通过回调方法处理组件对应的事件，这种情况能满足绝大多数需求，有些情况我们需要对组件进行操作，此时就需要获取组件的引用，进而通过该应用对组件进行操作。比如，我们可以通过引用拿到组件，修改组件的属性。定义组件的引用通过在JSX代码中加入 ref=”某个字符串”,就可以定义一个组件的引用名称,如原创 2016-08-27 17:37:51 · 1456 阅读 · 0 评论 -
React Native开源项目如何运行（附一波开源项目）
学习任何技术，最快捷的方法就是学习完基础语法，然后模仿开源项目进行学习，React Native也不例外。React Native推出了1年多了， 开源项目太多了，我们以其中一个举例子.给大家演示下如何运行开源项目.(前提是你已经搭建好React Native环境了)下载开源项目首先需要找到开源项目 ,比如下面这个. 地址: https://github.com/Bob1993/react-nat原创 2016-08-27 11:19:44 · 2788 阅读 · 0 评论 -
从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字，可以使用View组件和Text组件样式，没有自己特定的样式。 与Text组件类似，TextInput组件内部的元素不再使用FlexBox布局，而采用文本布局。详情见上一篇文章从零学React Native之10TextTextInput属性只列出了一些常用的，详情见官网 属性名 描述 defaultValue 字符类型,定义TextIn原创 2016-08-25 17:50:00 · 1053 阅读 · 0 评论 -
从零学React Native之10Text
在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中。虽然在之前的文章中多次使用了Text组件，但是Text组件还是值得专门学习的, 并没有想象中的那么简单。任何一个组件，都有样式和属性，样式一般约束控件的样式和位置，定义在style属性中。属性就是直接声明在控件上。Text样式Text组件支持View的所有样式键。但是需要注意的是，Text内部的元素原创 2016-08-23 15:01:17 · 1377 阅读 · 0 评论 -
React Native等比放大不丢失图片
之前我们学习了从零学React Native之08Image组件大家可以发现, 原生的Image控件无法实现等比放大后无丢失显示。 如： 有一张20x10的图片, 要放入一个40x30的显示区域内. 1. cover模式(默认),图片放大为60x30, 然后切成40x30， 会丢失部分显示的图片。 2. contain 模式, 图片分辨率为20x10, 四周都有空白。 3. stretch模原创 2016-08-17 10:08:07 · 1833 阅读 · 0 评论 -
React Native自定义导航栏
之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 … 从零学React Native之03页面导航 …经过之前的学习, 我们可以完成一个自定义导航栏了, 效果如下: 我们需要创建一个 NaviBar.js 用来显示顶部的导航栏, 还需要四个界面(Page1.js,Page2.js,Page3.js,Page4.js)。 当然还需要修改ind原创 2016-08-15 17:32:43 · 4200 阅读 · 2 评论 -
从零学React Native之09可触摸组件
可触摸组件有: TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback 1. TouchableWithoutFeedback,在用户触摸的时候没有反馈任何触摸效果,体验很不好,基本很少使用. 2. TouchableNativeFeedback 是Android操作系统专用组件,原创 2016-08-12 14:36:06 · 1124 阅读 · 0 评论 -
从零学React Native之08Image组件
开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。 Image组件必须在样式中声明图片的款和高。如果没有声明，则图片将不会被呈现在界面上。网络图片加载加载网络图片非常简单， 直接上代码： 修改index.ios.js或者inde.android.jsimport React, { Component } from 'rea原创 2016-08-12 14:29:28 · 1108 阅读 · 0 评论 -
从零学React Native之07View
View 组件是React Native最基本的组件.绝大部分其他React Native 组件.View组件的颜色和边框backgroundColor 键用来指定颜色. RN 0.19版本开始,只有Text和TextInput组件会继承父组件的背景颜色Opacity键定义了View组件的透明度, 取值0-1, 0表示完全透明borderStyle键用来设置边框的风格,只能取值solid,原创 2016-08-11 14:54:01 · 1071 阅读 · 0 评论 -
React Native中pointerEvent属性
在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件。这是因为绝对定位只是说这个组件的位置由它父组件的边框决定。 绝对定位的组件可以被认为会覆盖在它前面布局（JSX代码顺序）的组件的上方.如果被遮盖住的组件需要处理触摸事件。比如我们在一个地图组件上覆盖了一个图像组件用来显示信息，又不想让这个图像组件影响用户手指拖动地图的操作，这时就需原创 2016-08-11 14:50:05 · 1410 阅读 · 0 评论 -
从零学React Native之06flexbox布局
前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的，这一篇文章，重点介绍下flexbox布局。什么是flexbox布局React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 L原创 2016-08-08 16:55:47 · 1020 阅读 · 0 评论 -
从零学React Native之05混合开发
本篇文章，我们主要讨论如何实现Android平台的混合开发.RN给Android端发送消息首先打开Android Studio, Open工程, 在React Native项目目录下选择android子目录下的build.gradle文件打开。React Native已经默认帮我们创建好了两个类MainApplication和MainActivitypublic class MainApplicat原创 2016-08-05 15:58:50 · 2164 阅读 · 7 评论 -
React Native声明属性和属性确认
属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。 //自定义组件export default class ConfirmDialog extends Component { //....}ConfirmDi原创 2016-08-05 15:47:18 · 5223 阅读 · 0 评论 -
从零学React Native之04自定义对话框
之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进行扩展。当我们点击注册的时候，可以弹出一个对话框，让用户确认一下，如下图：原创 2016-08-05 15:41:11 · 4915 阅读 · 0 评论 -
从零学React Native之03页面导航
之前我们介绍了RN相关的知识： 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机本篇主要介绍页面导航上一篇文章给大家介绍了简单界面的搭建, 这一篇我们需要两个界面, 一个是注册界面,一个是注册信息界面. 当然我们还需要一个组件去控制两个界面的切换.每个界面其实就一个组件 , 可以通过下面的代码抽取相关的模块m原创 2016-08-02 09:04:54 · 1173 阅读 · 0 评论 -
从零学React Native之02状态机
本篇文章首发于简书 欢迎关注之前我们介绍了RN相关的知识： 是时候了解React Native了 从零学React Native之01创建第一个程序本篇文章主要介绍下下面的知识: 1.简单界面的搭建 2.状态机添加 3.渲染框架简介 4.语法简化搭建界面之前我们介绍了如何创建一个应用,现在我们来开发一个简单的注册界面。注释都写在代码里了, 如下： 进入项目目录下，修改下index.an原创 2016-08-02 09:00:06 · 1118 阅读 · 0 评论 -
从零学React Native之01创建第一个程序
本篇首发于简书 欢迎关注上一篇文章是时候了解React Native了介绍了React Native。大家应该对React Native有个初步的认识。接下来我们就可以初始化一个React Native项目了。创建项目打开命令窗口，进入我们希望建立的项目目录所在的父目录后，输入命令react-native init AwesomeProject其中AwesomeProject是项目的名称。默认in原创 2016-08-02 08:50:45 · 1112 阅读 · 0 评论 -
是时候了解React Native了
文章首发于简书,欢迎关注随着科技的发展，手机开发也在向好的方向不停的转变。IOS和Android两大手机操作横空出世，称霸江湖。我们每开发一个手机软件最少都需要开发这两个终端。 两大操作系统都在不断的提升完善,能力越来越强大,这对于我们开发者是好事，因为用智能手机的用户越来越多。话天下大事，分久必合，合久必分。这句话对于移动开发也是一样的。 这几年来，移动应用开发者做梦都希望有一个能跨平台的原创 2016-08-02 08:38:52 · 1169 阅读 · 0 评论