http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScript编写原生的移动应用.从2015年3月份 开源到现在,已经差不多有半年.目前,React-Native正在以几乎每周一个版本的速度进行快速迭代,开源社区非常活跃.2015年9月15 日,React-Native正式宣布支持安卓,并在项目主页中更新了相关文档,这意味着React-Native已经完全覆…

http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下React Native ART 现在手上闲下来了和大家分享一下React Native中的ART使用心得 React Native ART 究竟是什么? 所谓ART,是一个在React中绘制矢量图形的JS类库.这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在 React中…

最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate resources”,什么意思呢,就是打包资源有重复,后来查看了一下,发现打包到android/app/src目录下的静态文件重名了. 重现步骤: 1:通过vscode打开项目,运行打包命令 react-native ram-bundle --entry-file index.js --platfo…

一.原因 当您发现rn app在关闭远程调试后,一些功能无法正常工作时,这很可能是由于设备上的JavaScript执行环境与远程调试器之间的细微差别造成的. 例如,日期问题,Date构造函数似乎接受Chrome远程调试环境中的特定于语言环境的日期格式,但不接受设备上的日期格式.这可能是由于您的计算机的区域设置已设置为使用dd.MM.yyyy格式的文化,而模拟器设置为其他内容,例如en-US. ISO格式适用于两者,因为无论语言环境如何都支持它. 当您在设备或模拟器上运行代码时,代码将在设备本身的…

首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, Sty…

参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去引用 'use strict'; import { NativeModules } from 'react-native'; module.exports = NativeModules.SplashScreen; 隐藏的方法: componentDidMount() { SplashScreen.…

React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810652 /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * fetch请求数据 header 参数 response转json 请求方式 */ import React…

开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收银机,android7.0+ 最近在使用react native进行app的开发工作,rn开发的内容会与原生app混合,在一些使用场景下遇到了一些问题 使用场景:每日收益与每月收益的折线图统计 在pc/h5端的开发工作中,图标类的开发使用echarts/f2等三方工具都是比较常见的了,在react…

//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise 对象代表一个异步操作,有三种状态:Pending(进行中) Resolved(已完成) Rejected(已失效) * * Promise 实例生成以后,可以分别制定'完成' 和'失败'状态的回调函数,实现方式:链式调用方法 * * 语法: * fetch(参数) * .then(完成的回调函数)…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {JSON} params body的请求参数 * @return 返回Promise */ function uploadImage(url,params){ return new Promise(function…

react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: constructor(props) { super(props) console.log('_____constructor_____') this.state = { count: 0 } } render() { return ( <View> 点击增加 {this.state.count} </Vie…

react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> {this.props.name} </Text> </View> 父组件定义传递的值 <MyComponent name='小明'/> 2:子组件定义默认props(父组件未传值的情况使用) static defaultProps = { name: '小红' } 二.pr…

这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置的,这个组件本身就有一个属性是设置其大小的,两个选项,一大一小.这里顺便就介绍一些该组件的属性: animating:这个参数接受布尔型的值,表示是否显示加载指示器. color:string型参数,用来设置指示器的颜色,默认是灰色的,我们一般也不管他. hidesWhenStopped(仅iOS可…

前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也只有一个 Store,而且只用一个 state 树来管理组件的状态.随着应用逐渐变得复杂,React 将组件看成状态机的优势仿佛变成了自身的绊脚石.因为要管理的状态将会越来越多,直到你搞不清楚某个状态在不知道什么时候,由于什么原因,发生了什么变化.Redux 试图让状态的变化变得可预测.Redux…

一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需要指定props作为节点的属性. 一般组件很少需要对外公开方法(例外:工具类的静态方法等),唯一的交互途径就是props.所以说它也是父组件与子组件通信的桥梁. 组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改. 状态(state) 它是组件的内部状…

redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到store.action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作. 2.Store中的state的可以说是一个字典(map), 3.Reducer 有两个参数,就得state  与action  返回新的state,这是一个纯函数. 如果调用某个action,只是改变这个st…

ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); const ds= new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2 }); this.state={ dataSource: ds.cloneWithRows(news) }; } 在这里  news 中的数据可以是定义的固定的数值,也可…

React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组件指定的 这个方法在对象被创建之前执行,因此不能在方法内调用this.props ,另外,注意任何getDefaultProps()返回的对象在实例中共享,不…

React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVerticalScrollIndicator={false} style={styles.container} stickyHeaderIndices={[]} > stickyHeaderIndices  = {[1]} 表示 ScrollView 的 第二个子元素 上滑时 吸顶 本博客地址: wukong…

React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示 问题: 0.9.0 或 0.8.0 版本的react-native-scrollable-tab-view如果外层使用了一个ScrollView,在Android端上是无法显示的,iOS上显示无问题. 类似代码如下: <}}> <ItemMoment navigation={this.props.navigation} item={…

React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/51813677 (非原创)     React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有…

moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以只寫 moment().get('year'),可讀性增強許多. 問題 React Native 0.29.x 預設使用 ES6,並支援 import 語法.問題出在如果遵照官方網站的說明去載入語系檔,會發生找不到模組 (cannot find module) 的錯誤.推測可能是 moment.js…

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第…

这个问题已经得到解决,参照stackoverflow上的问题:https://stackoverflow.com/que...这个问题的原因就处在Android工程中app/build.gradle中,build.gradle中对于 react-native库的版本的配置默认是这么写的: compile 'com.facebook.react:react-native:+' 这个最后面的 “+” 表示的是使用最新的版本号.也就是说,我们Android工程中,依赖的React native 的na…

参考资料:https://github.com/sunyardTime/React-Native-CodeStyle 感谢情书哥无私奉献 ##一.编程规约 ###(一) 命名规约 [强制] 代码中命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束: `_name / $Object / name_ / name$ / Object$` [强制] 代码中命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式: 说明:正确的英文拼写和语法可以让阅读者易于理解,避免歧义.注意,即使纯…

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第…

在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认为会覆盖在它前面布局(JSX代码顺序)的组件的上方. 如果被遮盖住的组件需要处理触摸事件.比如我们在一个地图组件上覆盖了一个图像组件用来显示信息,又不想让这个图像组件影响用户手指拖动地图的操作,这时就需要使用图像组件从View组件继承得到的pointerEvents属性来解决这个问题. **poin…

这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的导航,完全不符合要求,于是自己手写了一个导航. Github地址:github.com/gaoxiaosong- 目前支持如下功能: 横屏和竖屏模式. 安全区域支持. Android和iPhone X的支持. absolute布局支持. 回退按钮自动执行. 标题是否居中. 导航条下方分隔线. 自定义…

先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点击事件,但是由于这个页面不是在我们本地弄的,而是在后台那边弄好,然后通过给一个h5链接,所以我们在本地是没有办法给它添加点击事件.嗯,是的,我们没有办法给它添加事件点击,但是我们没有拿到这个点击事件,我们怎么进行跳转呢.到重点了. 在react native有一个第三方的组件,是可以实现这个功能的: reac…