![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Native
清风飏
有条理,有规划,忙而不乱
展开
-
ReactNative数据持久化的五种方式
转载http://www.jianshu.com/p/0010aea78e10使用JS写App完全是一种不一样的感受,思维方式跟OC编程很不尽相同,这篇文章主要来说说使用ReactNative的时候,数据是怎么存储的,也就是ReactNative数据持久化有哪些方案。总结的主流开发中一共有5种方案。如果有更好的存储方式,可以给我留言。1.通过RCTRootView的属性传值RCTR转载 2016-09-02 10:15:42 · 3418 阅读 · 0 评论 -
react native 实现动态高度Listview 和图文混排
当考虑这个动态高度和图文混排的问题,想必你已经知道如何加载ListView和分组listview,这里不再赘述...这里简介实现的动态的高度的cell的思路写一个ListView,准好数据源在renderRow中渲染自定义的item在item 中布局text 和image在text 中实现 onLayout={this._onTextLayout.bind(this)} 5._onT原创 2017-01-06 16:17:03 · 5251 阅读 · 0 评论 -
React-Native 与原生的3种交互通信(Android)
转载:http://blog.csdn.net/asddavid/article/details/53338616在为前端书写模块部分,不可避免的要接触核心的通信部分。大致分为2种情况:Android主动向JS端传递事件、数据JS端被动向Android询问获取事件、数据方式优点缺点事件方转载 2017-01-06 09:09:42 · 1116 阅读 · 0 评论 -
react native实现可展开Text控件
转载:http://blog.csdn.net/jan8705_/article/details/52279533原理:组件初始化时不设置Text控件的numberOfLines属性,测量一下组件高度(最大高度),然后在设置numberOfLines属性,再次测量一下组件高度(最小高度),若最大高度大与最小高度,表示需要显示“展开”。[plain] view plain转载 2017-01-06 09:11:46 · 2119 阅读 · 1 评论 -
SyntaxError:Strict mode does not allow function declaration in a lexically nested statement.
RN更像是一个不断成长的孩子,在成长的过程中,会遇到各种各样的问题,对于开发者,在不断打怪中升级,得到锻炼也在慢慢的成长。问题描述 使用React-native init创建了一个新项目,在package.json中使用的react-native的版本如下:"dependencies": { "react": "15.4.1", "re转载 2016-12-27 16:47:54 · 1757 阅读 · 0 评论 -
react native 技术栈
大致了解了一下RN的实现,感觉里面的技术栈是比较深的,跟搞前端的大牛请教了一下,大致总结出下面一个学习路径,决定按部就班把这方面技术好好学习一下。转载 2016-11-27 10:10:40 · 1053 阅读 · 0 评论 -
react native ref的使用
转载:ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。render() { return (c) => this._input = c} />; }, componentDidMount() { this._input.focus();转载 2016-12-02 15:16:13 · 979 阅读 · 0 评论 -
react native 如何真机运行
默认情况下,你的iphone 连接你的电脑,使用localhost,真机可以运行当你拔掉连接线的时候,这是还可以运行,因为jsbundle 已经加载但是你杀掉进程时候,你发现你的app 启动不起来了,怎么办呢?1>在终端输入 ifconfig,得到你电脑的ip地址2>RCTWebSocketExecutor.m文件中的localhost改为电脑的的ip就可以了原创 2016-11-18 16:42:31 · 640 阅读 · 0 评论 -
react native navigator禁用滑动返回
转载:http://blog.csdn.net/pz789as/article/details/52606635在React-Native开发中,经常会用到导航。导航做什么用的呢,简单点说就是页面跳转。一个项目中,肯定有很多的页面要跳来跳去的,RN就给我们提供了Navigator组件,可以很好的管理页面的跳转。在所有工作做完之后,发现有个bug!在从第一个界面跳转到下一个界面后,如果从转载 2016-11-18 13:43:59 · 4159 阅读 · 0 评论 -
__nw_connection_get_connected_socket_block_invoke Connection has no connected handler
解决办法是:1. Xcode menu -> Product -> Edit Scheme...2. Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"3. Run your app again, done! 这样就没问题了转载 2017-01-10 09:07:10 · 4512 阅读 · 0 评论 -
react native 判断网络状态
转:http://blog.csdn.net/yangysng07/article/details/51583604React Native 获取网络状态 NetworkInfoReact-native提供了了一个NetInfo类用来获取和监听网络状态。属性与方法1.addEventListener(eventName:ChangeEventName转载 2017-02-07 13:18:24 · 2872 阅读 · 0 评论 -
React+ES6
转载:http://blog.csdn.net/sunyuan_software/article/details/51206161下载完之后,应该是有这么多js文件的: 第一个React+ES6的页面 Hello React Hello React 我们可以看到,里面应用转载 2016-10-14 10:04:38 · 373 阅读 · 0 评论 -
认识HTML5的WebSocket
转载:http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html认识HTML5的WebSocket在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简单的语转载 2016-10-17 08:43:33 · 262 阅读 · 0 评论 -
js中遍历获取对象属性和方法主要
js中遍历获取对象属性和方法主要有Object.keys()、Object.getOwnPropertyNames()、for...in...三种方式 一、Object.keys()、Object.getOwnPropertyNames()、for...in...区别 1、for in会输出自身以及原型链上可枚举的属性。2、Object.keys用来获取对象原创 2016-10-18 09:50:52 · 12740 阅读 · 0 评论 -
搭建Amazeui+react+webpack+webstorm开发环境
http://www.cnblogs.com/xiaoshitou188/p/5868557.html搭建Amazeui+react+webpack+webstorm开发环境字数2549 阅读3292 评论25 喜欢5来段广告你有没有遇见过垂直居中的问题?有没有听说过flex弹性布局?没听过的赶紧点了解Flex布局,看看flex布局是有多么强大!!!还在发愁flexbox布局不兼容转载 2017-02-10 10:29:57 · 838 阅读 · 0 评论 -
React-Native开发iOS篇-热更新的代码实现
需求1.在打开APP的时候进行网络请求,检查是否有网络更新。2.如果有网络更新,下载新的版本,再次打开APP的时候,就直接连接到新的内容。具体功能的实现:- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ [[原创 2017-08-17 14:29:05 · 4641 阅读 · 1 评论 -
ReactNative SectionList使用详解
转载:http://blog.csdn.net/qq_38453189/article/details/728107411、在说SectionList之前,我们先来讲讲ScrollView、ListView/FlatList和SectionList几者之间的区别?ScrollView和ListView/FlatList应该如何选择?ScrollView会简单粗暴地把所有子元转载 2017-08-02 14:00:04 · 2374 阅读 · 0 评论 -
fetch使用的常见问题及解决办法
转载:http://www.cnblogs.com/wonyun/p/fetch_polyfill_timeout_jsonp_cookie_progress.html首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以参考MDN fetch教程。引言说道fetch就不得不提XMLHttpRequest了,XHR在发送web请求时需要开发者配置相关请求信息和成转载 2017-07-24 10:37:48 · 1257 阅读 · 0 评论 -
react native fetch
转载:http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/在 JS 中使用 fetch 更加高效地进行网络请求在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用。在 AJAX 时代,进行请求 API 等网络请求都是通过 XMLHttpReq转载 2017-02-10 09:14:09 · 2581 阅读 · 0 评论 -
React native 判断 Platform
在模拟器中运行,Platform 可以判断出来,但是在真机运行的时候Platform 这个platform,什么也没出来解决办法: IOS 删掉app,重新build Android 删掉 index.android.bundle 重新执行 react-native bundle --platform androi原创 2016-11-18 11:21:39 · 1087 阅读 · 0 评论 -
Could not get BatchedBridge, make sure your bundle is packaged correctly
ReactNative 在 模拟器上运行可以运行 android真机运行ReactNative的时候,抱这个错误,Could not get BatchedBridge, make sure your bundle is packaged correctly1.react-native start > /dev/null 2>&1 & 2.创建资源原创 2016-11-14 18:55:00 · 864 阅读 · 0 评论 -
react-native-art-绘图入门
本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample.a文件 定义所谓静态链接是指把要调用的函数或者过程链接到可执行文件中,成为可执行文件的一部分。当多个程序都调用相同函数时,内存中就会存在这个函数的多个拷贝,这样就浪费了宝贵的内存资源。.so文件是共享库文件(动态链接)。动态链接所调用的函数代码并没有被原创 2016-10-31 15:12:45 · 2531 阅读 · 0 评论 -
ReactNative 侧滑菜单的实现
侧滑菜单在App的框架结构非常常见和实用,本篇博客,是用reactNative实现了一个侧滑的基本的框架,但具体的菜单栏需要各位看官的去自行添加了实现的思路 tab+定时器+Animated.View的方式import React, { Component, PropTypes } from 'react'import { View, Text, StyleSheet原创 2016-11-11 11:03:17 · 2581 阅读 · 4 评论 -
ReactNative与Object-C的通讯机制
转载:http://www.cocoachina.com/ios/20150401/11458.htmlReact Native是Facebook刚开源的框架,可以JavaScript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得学习,本篇先来看看它最基础的JavaScript-ObjectC通信机制(以下简称JS/O转载 2016-10-14 10:26:03 · 803 阅读 · 0 评论 -
JavaScript Nodejs React Js 与React Native之间的关系是怎样的?
1,React Js的目的是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom。2,React Native的目的是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app,但是性能可能比原声app差一点。原创 2016-10-24 09:18:39 · 10824 阅读 · 0 评论 -
React Native style属性重载
let styles = StyleSheet.create({popupContainer: {flex: 1,position: 'absolute',top: 0,left: 0,justifyContent: 'center',alignItems: 'center',width: screen.width,height: screen.height,原创 2016-11-03 16:28:46 · 1487 阅读 · 0 评论 -
转载: React Native 采用Fetch方式发送跨域POST请求
转载:http://blog.csdn.net/u012620506/article/details/52346264 小白林宇风的技术博客关于跨域:A上的页面获取B上的资源,浏览器会检查服务器B的HTTP头(HEAD请求),如果Access-Control-Allow-Origin中有A,或者是通配符*,浏览器就会允许跨域。这叫CORS,还有一点比较重要,转载 2016-09-05 15:12:19 · 3552 阅读 · 0 评论 -
ReactNative调试
在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。Developer MenuDeveloper Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Nativ转载 2016-09-02 10:49:30 · 736 阅读 · 0 评论 -
null is not object evaluating ('_this3_selectRow')
先贴下代码:ListView contentContainerStyle = {styles.list} pageSize={2} dataSource = {this.state.dataSource} renderRow={thi转载 2016-11-28 17:31:56 · 2314 阅读 · 0 评论 -
ReactNative 广播机制
转载:http://blog.csdn.net/syg90178aw/article/details/50964947React Native学习之RCTDeviceEventEmitter(类似iOS的NSNotificationCenter)简单用法;直接上代码吧引入 [objc] view plain copy impo转载 2016-11-16 16:37:18 · 2018 阅读 · 0 评论 -
React Native真机运行 ios
注意在iOS设备上运行React Native应用需要一个Apple Developer account并且把你的设备注册为测试设备。本向导只包含React Native相关的主题。译注:从XCode 7起,在自己的设备上调试App不再需要开发者账户了。从设备访问开发服务器在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果。这样做的前提是你的电脑和设备原创 2016-11-14 14:47:42 · 689 阅读 · 0 评论 -
react native key,ref,bind的作用和使用
转载:http://blog.csdn.net/pz789as/article/details/52537028我们在项目里面,经常会用的批次渲染,比如一个列表渲染很多个item,或者一个横排或者竖排同时渲染多个数据。例如:[html] view plain copyrender1(){ var arr = []; f转载 2016-11-30 09:19:03 · 5196 阅读 · 0 评论 -
ReactNative Animated.view的用法
转载:http://www.alloyteam.com/2016/01/reactnative-animated/?utm_source=tuicool&utm_medium=referral最近ReactNative(以下简称RN)在前端的热度越来越高,不少同学开始在业务中尝试使用RN,这里着重介绍一下RN中动画的使用与实现原理。举个简单的栗子 var React = r转载 2016-11-02 16:39:17 · 7593 阅读 · 0 评论 -
ReactNative中 ...this.other与...this.props的区别
在React中,一个非常常用的模式就是将组件抽象封装起来。这些组件将对外公开一些属性(Props)来完成一些简单的功能,然而其内部细节可能是比较复杂的。一般情况下,Props是不变的。其使用方式如下:{this.props.key}下面我们先用一段代码来看一下Props如何使用var CommentBox = React.createClass({ ren原创 2016-11-02 16:13:11 · 10447 阅读 · 2 评论 -
React Native CSS样式传递
转载:http://www.zplan.net/news.php?id=194React Native如何定义css 样式React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解背后的基本原理。声明样式在 React Native 中声明样式的方法如下:转载 2016-11-02 16:33:50 · 3329 阅读 · 3 评论 -
ReactNative 中 static propTypes
export default class BookBox extends Component { static defaultProps = { initialBooks: [ { title: 'Twilight', author: 'Stephanie Meyer', isbn: '0316015849' }原创 2016-11-02 16:22:11 · 6015 阅读 · 0 评论 -
shouldcomponentupdate nextprops
http://blog.csdn.net/jjx0224/article/details/49869597性能优化每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵转载 2016-11-02 15:54:59 · 3027 阅读 · 0 评论 -
react native 导入第三方连接库,Orientation.h file is not found
正确的执行步骤1>npm install --save react-native-orientation2>react-native link 自动将project和.a文件导入你的xcode 项目中,不需要手动导入3>bulild,编译运行原创 2016-11-17 09:03:53 · 3146 阅读 · 0 评论 -
html5中的sessionStorage和localStorage。
转载:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.htmlhtml5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后转载 2016-10-12 09:19:43 · 320 阅读 · 0 评论