React-native

关于react-native 运行项目中遇到could not connect to development server的问题

我在创建好react-native项目中，出现这样的问题。
WMSmile·2016-08-29 18:10

React-Native布局

引用参考链接:https://segmentfault.com/a/1190000002658374http://justcode.ikeepstudying.com/2015/10/css3-flex-弹性布局用法详解/http://reactnative.cn/docs/0.31/layout-props.html#content1.flexflex:1"flex是display的一个属性值。
早起的小孩没饭儿吃·2016-08-29 10:29

[ReactNative]ReactNative环境搭建时react-native run-android Build Failed异常

公司让学习ReactNative，都这个点了跑完步回来还要搭环境.被自己挖的坑给埋了...........................手贱把失败的cmd窗口给关了大概就是BuildFailedxxxxxxxxxxxxxAndroid_HOMExxxxxx原因就是我电脑中环境变量里没有配置ANDROID_HOME变量（SDK的路径）然后配置完成后，继续执行react-nativerun-andr
王1三·2016-08-28 23:26

React-Native使用自定义字体文件iconfont

React-Native设置自定义字体文件今天主要说说如何通过字体文件加载应用中的一些图标首先推荐一个网站iconfont-阿里巴巴矢量图标库，这里有海量的图标，可以下载你想要的各种矢量图标，你也可以在注册并登陆账号后
尹_路人·2016-08-26 09:52

支持android&ios高度自适应及JS相互调用的组件react-native-webview2

基于React-native原生的WebView组件纯js实现,起名为react-native-webview2或WebView或Web.react-native-webview2当你设置了属性source
SuperChain·2016-08-25 10:17

[React Native混合开发]React Native for iOS之CSS和UI布局

CSS和UI布局一、了解React-Native组件作为开发者都知道，UI组件对于一个应用的重要性。
刘玉刚·2016-08-25 00:55

《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）

其中上拉刷新效果已经实现，具体思路见：《React-Native系列》19、ListView组件之上拉刷新（iOS和Android通用）今天我们重点来说说下拉刷新的实现。
coder_小刀·2016-08-24 22:27

《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）

其中上拉刷新效果已经实现，具体思路见：《React-Native系列》19、ListView组件之上拉刷新（iOS和Android通用）今天我们重点来说说下拉刷新的实现。
hsbirenjie·2016-08-24 22:00

一个简单的ReactNative demo

reactnativelearn代码做了一些简单的注释,下面是源码importReact,{Component}from'react';import{AppRegistry,Navigator,ToastAndroid}from'react-native
夏洛克的喵·2016-08-24 16:38

[React-native]RN模块API学习-RN，原生交互

组件的名称@OverridepublicStringgetName(){return"ToastCustomAndroid";}后面在js中使用到的import{NativeModules}from'react-native
美乃滋酱啊·2016-08-24 15:27

React-Native项目解决Xcode对真机编译报错：Can't find 'node' binary to build React Native bundle

刚开始接触React-Native的时候我曾遇到一个错，最近发现有人也在问这个问题，所以我在这里记一下，供同学参考开发React-Native项目需要搭建一系列开发环境，环境搭好之后，我在Xcode上编译的过程中遇到了一个错误
尹_路人·2016-08-24 15:03

《React-Native系列》22、 Flux框架Demo详解

今天我们来结合一个简单的Demo来讲解Flux框架，让大家了解Flux框架的真面目。先上一张比较漂亮的图（对漂亮的图，总是没有抵抗力:-)）。我们再来回顾下Flux框架的四大组成部分View：视图层Action（动作）：视图层发出的消息（比如mouseClick）Dispatcher（派发器）：用来接收Actions、执行回调函数Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Vie
hsbirenjie·2016-08-23 09:00

《React-Native系列》21、 解决RN在Android下不支持gif问题

由于RN在Android平台上不支持gif格式的图片，今天介绍下我们是怎么处理这个问题的。先来看看我们需要实现的效果，这是一张gif图片，当我们列表上拉加载下一页的时候需要使用这个效果，如下图：我们的解决方案是：将gif切成15张png的图片，暂且命名为loading1、loading2....loading15然后循环的setState修改图片，就像看电影一样，达到动画的效果。1、在构造方法中初
hsbirenjie·2016-08-22 22:00

009_ReactNative: ScrollView

如果想只渲染当前显示的,使用listview替代importReact,{Component}from'react';import{AppRegistry,ScrollView,Image,Text,View}from'react-native'classIScrolle
莫_名·2016-08-21 17:40

《React-Native系列》20、 RN数据流之Flux概览

今天我们来看下ReactNative的数据流框架Flux。Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。相比于形式化的框架它更像是一个架构思想，不需要太多新的代码你就可以马上使用Flux构建你的应用。React标榜自己是MVC里面V的部分，那么Flux就相当于添加M和C的部分。一个Flux应用主要包含四个部
hsbirenjie·2016-08-21 17:00

005_ReactNative: Style

CascadingStyleSheets).importReact,{Component}from'react';import{AppRegistry,StyleSheet,Text,View}from'react-native
莫_名·2016-08-21 15:14

React-Native学习十八：Navigator

Navigator处理你的app中不同页面的切换。它使用JavaScript实现，在iOS和Android中都可用。如果仅仅用于iOS，你也可以使用NavigatorIOS，因为它使用的是本地的UIKit导航；一、属性和方法名称类型说明initialRouteobject导航的初始route（第一个显示的）；initialRouteStackobject导航的route集合，如果initialRo
p106786860·2016-08-19 23:00

用react-native+typescript+redux写糗事百科app

最近一段时间都在玩react-native,在React-Native学习指南里看到有人做了个react-native的糗事百科客户端,点进去看发现代码也是一年前的了，便打算自己写一个练练手。
泡泡·2016-08-19 00:00

《React-Native系列》19、 ListView组件之上拉刷新（iOS和Android通用）

如果你对ListView的基础知识不是很清楚，建议先移步：《React-Native系列》16、RN组件之ListView思路：1、常量定义：constmoreText="加载完毕";/
hsbirenjie·2016-08-17 23:00

《React-Native系列》18、 RN之定时器Timer

在web开发中，我们通常需要使用定时器功能，使用setTimeout和setInterval函数。那么在ReactNative中，是否也提供了定时器的功能呢？答案是肯定的。我们还是先看看官网怎么说的。定时器是一个应用中非常重要的部分。ReactNative实现了和浏览器一致的定时器Timer。提供的方法如下：setTimeout,clearTimeoutsetInterval,clearInter
hsbirenjie·2016-08-17 22:00

使用属性，定制组件

importReact,{Component}from'react';import{AppRegistry,StyleSheet,Text,View,Image,}from'react-native';
json_jie·2016-08-17 11:29

[React Native Android 安利系列]样式与布局的书写

接下来，我们会一起详细的了解这些react-native的样式，及所
侯医生·2016-08-17 00:00

关于React Native 报Export declarations are not supported by current JavaScript version错误的解决问题

设置.js文件中支持react-native语法高亮首先会发现在js文件中有不少的警告，类似这样：这个警告的原因是因为编辑器不知道所引用的这些东西是在
xiangzhihong8·2016-08-16 20:00

《React-Native系列》17、 RN中this所引起的undefined is not an object错误

在我们编写RN代码的时候经常会出现一个错误，undefinedisnotanobject(evaluating'this.refs').undefinedisnotanobject错误，提示我们未知的对象，该句话的含义就是我们没有定义该对象。但是this就是当前对象，为什么还会出现如此问题？只有一种可能，就是当前引用的this和this.setState的this不是指向同一个对象，这样才会出想“
hsbirenjie·2016-08-15 23:00

《React-Native系列》16、 RN组件之ListView

今天来谈谈ReactNative提供的ListView组件，ListView是我们最常用的组件。还是先来看看官网怎么说的。ListView-一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函
hsbirenjie·2016-08-15 22:00

React-Native调试

原文链接：http://wiki.jikexueyuan.com/project/react-native/debugging.html(本文有些改动和补充)1.IDE推荐WebStorm或者VisualStudioCode2
早起的小孩没饭儿吃·2016-08-15 15:47

React-Native 打造的一个微型云翻译软件－－（云翻译）

云翻译试图打造一个码农专用的开源翻译工具期待有志同道合的人一起实现这个想法应用移动端采用的React-Native技术完成(IOS平台兼容待完善)服务端使用的是LeanCloud提供的服务云引擎采用Node.js
苏创·2016-08-15 12:10

《React-Native系列》15、 RN之可触摸组件

今天，我们来看下ReactNative提供的可触摸组件。分别为:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。TouchableWithoutFeedback控件是触摸点击不带反馈效果的，另外三个都是有反馈效果。这三个组件都继承了所有TouchableWithoutFeedb
hsbirenjie·2016-08-14 23:00

《React-Native系列》14、 RN学习之NodeJS

由于ReactNative使用了NodeJS环境，以前没有系统学习过NodeJS，故花点时间学习下。了解ReactNative里关于NodeJS部分的知识。我们先看看一个RN项目的目录，如下：我们看到的node_modules和package.json都是和NodeJS相关联的。学习完这边文章你就能明白：1、我们在调试时，使用的包服务器，启动命令：npmstart，是什么意思？2、我们在down一
hsbirenjie·2016-08-14 12:00

《React-Native系列》13、 组件封装之Dialog（iOS和Android通用）

最近在项目中封装了个Dialog组件，iOS和Android平台上通用。组件Dialog显示时，从页面顶部滑动到中间，点击确认或取消后，从页面底部划出页面，需要注意动画的实现。源码如下：'usestrict'; importReact,{Component}from'react'; import{ StyleSheet, View, Image, Text, TouchableHighlight,
hsbirenjie·2016-08-13 22:00

《React-Native系列》12、 API模块之PixelRatio和Dimensions

PixelRatio和Dimensions是ReactNative提供的API，这个在我们编写RN页面的时候必须要使用的。PixelRatio我们还是先看看官网怎么介绍的。PixelRatio类提供了访问设备的像素密度的方法。根据像素密度获取指定大小的图片如果应用运行在一个高像素密度的设备上，显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸乘以像素密度比：varimage=getI
hsbirenjie·2016-08-13 22:00

《React-Native系列》11、 图解RN布局之FlexBox，三分钟上手写RN界面

前面其实已经写过很多RN界面了，今天再来回顾下FlexBox布局，主要是记录笔记，必备日后查阅。综述flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flexitem），简称"项目"。flexDirection布局方向，决定
hsbirenjie·2016-08-12 12:00

tabbarIOS

/***SampleReactNativeApp*https://github.com/facebook/react-native*@flow*/importReact,{Component}from'react
LensJr·2016-08-12 12:28

《React-Native系列》10、 RN组件之Text和TextInput以及注意要点

今天把写的RN程序从iOS上迁移到Android上，发现了一些问题，主要涉及到Text和TextInput这两个组件，所以用一节来专门记录下来。Text组件我们先来看官网给的例子：renderText:function(){ return( {this.state.titleText+'\n\n'} {this.state.bodyText} ); }, ... varstyles=S
hsbirenjie·2016-08-11 22:00

React Native 升级到版本到0.25.1

ReactNative25，一个显著的变化是importReact的时候不再从react-native中导入，而是从react中导入。所以首先需要添加react的依赖。
姜家志·2016-08-10 20:17

[React Native Android 安利系列]js调用java组件原理

react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：https://segmentfault.com/blog...上节说到，我们可以通过react-native
侯医生·2016-08-10 00:00

react-native调用ios native方法-回调

上一篇中介绍了使用react-native调用iosnative方法,在真实的使用场景中，不仅仅只是调用下Native的方法，还需要对结果进行处理，Native处理完之后返回结果再回调会JavaScript
姜家志·2016-08-09 19:13

《React-Native系列》9、 Networking之fetch

今天，我们来看看RN怎么处理网络请求的，主要来看看fetchAPI。还是，先来看看官网怎么说的。UsingFetch ReactNativeprovidesthe FetchAPI foryournetworkingneeds.Fetchwillseemfamiliarifyouhaveused XMLHttpRequest orothernetworkingAPIsbefore.Youmayre
hsbirenjie·2016-08-06 23:00

《React-Native系列》8、RN如何打离线包

上一篇文章我们谈了bundle文件的加载和维护 ，以及在线包和离线包的区别，那我们今天来谈谈ReactNative如何打离线包。我们先来看看官网怎么说的Buildingyourappforproduction YouhavebuiltagreatappusingReactNative,andyouarenowitchingtoreleaseitintheAppStore.Theprocessist
hsbirenjie·2016-08-06 22:00

React-Native中通过JS调用原生模块

官方教程中有讲述在RN中如何集成原生模块（iOS日历组件）这里我也写了一个简单的示例，目标是实现消息提示框（Toast）源码还在这里一、iOS在ReactNative中，一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类，其中RCT是ReaCT的缩写。1、原生部分：NativeToast.h#import"RCTBridgeModule.h"#impor
尹_路人·2016-08-04 18:17

《React-Native系列》7、bundle文件的加载和维护

前段时间，app里某个功能使用RN开发，完成了上线，下面我们来说说我们是怎么处理bundle文件的。先来说一个概念：FaceBook宣传ReactNative时，热更新是不得不提的功能，可是官网文档和网上也没有提供比较完善的热更新的思路。我们先来看看ReactNative是怎么处理bundle文件的。可以有如下两种方式：1、app发版时，将bundle文件内置到app中，同时将图片和js文件内置到
hsbirenjie·2016-08-04 09:00

react-native ListView数据源Json展示

效果图demo.png附上代码：https://github.com/wanwang88/ReactNativeListView1Demo//导入jsonvarWine=require('./Wine.json');//获取屏幕widthvarDimensions=require('Dimensions');var{width}=Dimensions.get('window');数据源读取//ES
wangwan·2016-07-29 12:39

React-Native 基础（四）使用style定义组件的样式

参考文档：http://facebook.github.io/react-native/docs/style.htmlstyle是一个propsstyle的键值命名格式遵循CSS风格，除了名字使用驼峰法则而不是使用分隔符
梦想拒绝零风险·2016-07-29 10:06

React-Native 基础（三） 使用State改变状态

参考文档：http://reactnative.cn/docs/next/state.html#contenthttp://reactnative.cn/docs/next/state.html#content我们使用两种数据来控制一个组件：props和state.props定制的内容，一经组件创建，内容不再改变。需要改变的数据使用state.使用state1.在constructor中初始化st
梦想拒绝零风险·2016-07-29 10:45

React-Native 基础（二） 使用Props实现传参定制

参考文档：http://reactnative.cn/docs/next/props.html#content根据我蹩脚的英文水平来看，Props来源于英文单词Property有属性的意思（Props作为一个完整单词来看译为支柱，不合语境）。官方库提供的props下面以Image为例，这里的source和style就是props.);}}AppRegistry.registerComponent(
梦想拒绝零风险·2016-07-29 10:39

《React-Native系列》6、Navigator语法介绍及经典应用

今天来介绍下ReactNative的Navigator组件。先来看看官网是怎么说的：使用导航器可以让你在应用的不同场景（页面）间进行切换。导航器通过路由对象来分辨不同的场景。利用renderScene方法，导航栏可以根据指定的路由来渲染场景。 可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。查看Navigator.SceneConfigs来获取默认
hsbirenjie·2016-07-28 22:00

react-native实现定时器轮播图

先看下效果图31E51FB3-0839-4FB2-BFB3-BD8EA5312FA4.png附上代码https://github.com/wanwang88/ReactNativeAutoTimerScroll然后来看下应该怎么布局render(){return(this.onAnimationEnd(e)}//开始拖拽onScrollBeginDrag={this.onScrollBeginDr
wangwan·2016-07-28 11:54

[React Native Android安利系列]搭建React Native Android环境

(PS，和聊一聊系列写在一起也实在是没辙，谁知道如何新建专栏，给我留个言.....)React-Native的横空出世，满足了前端工程师们的愿景，摆脱了浏览器，前端开发者们又有了一个方
侯医生·2016-07-22 00:00

React-Native生命周期详解

Hello大家好。大家可能会想问为什么最近公众号不更新文章了，在这里说明一下。由于小编们近期工作和业务繁忙（我就不说是什么业务了，哈哈哈哈），需要静养，最近都没来得及更新文章，希望大家理解见谅哈。这一期先由我来为大家奉上一篇。上一期为大家讲解了一个ListView的实战项目，包括怎么网络请求，怎么解析数据，怎么布局等等，如果没看过的可以去看链接。当然没看过也不影响这一期的学习。这一期主要带大家了解
sidiWang·2016-07-21 01:05

《React-Native系列》5、RN实现弹出选择界面与动画效果

今天做了个弹出框，见文章最后图片所示，弹出的时候从屏幕下方弹入，用户选择后又从下方弹出，同时有遮罩效果。首先，我们是怎么实现弹出框，我这边用的是absolute绝对定位，包括弹层的覆盖，Dialog的绝对位置。Dialog的布局在这儿就不说了，flex-box、盒子模型...那么再来说说动画。参考：RN动画入门Animated1、创建一个Animated.Value我这里创建了2个，一个是遮罩效果
coder_小刀·2016-07-20 21:24
上一页 123 124 125 126 127 128 129 130 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他