React Native 使用问题记录

1.<View></View>之间有空格会报错 Trying to add unknown view tag

2.一些js语法糖注意点
http://facebook.github.io/react-native/docs/javascript-environment.html#content
函数表达式语法:
()=>xxx 等于 function(){return xxx;}
函数表达式语法:
state={a:1,B:2,C:3}
...state 等于 1,2,3

3.组件onPress事件参数
参数类型ResponderSyntheticEvent
可能通过e.nativeEvent获取坐标信息 结构{identifier,timeStamp,locationY, locationX,pageX,pageY,target}
target是数字

4.组件onLayout事件参数
参数类型SyntheticEvent
可能通过e.nativeEvent.layout获取坐标信息 结构 {height, width, y.5, x}

5.一个组件引用js对像的bug

<View style={[styles.circle,this._circleStyles]}/>

//用这种方式无法取到样式
this._circleStyles.left = this._previousLeft + gestureState.dx;
this._circleStyles.top = this._previousTop + gestureState.dy;

//用这种可以

this._circleStyles = {
left: this._previousLeft + gestureState.dx,
top: this._previousTop + gestureState.dy
};

6.ref和refs
组件中render生成的标签可以通过ref属性设置字段名称。在组件中可以通过this.refs[‘myRefString‘]或this.refs.myRefString引用对应标签

render: function() {
return <Text ref="myInput" />;
},
componentDidMount: function() {
this.refs[‘myInput‘]
this.refs.myInput
}

//ref也可以做为回调函数,回调参数为标签的引用
render: function() {
return <Text ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
}
时间: 2024-10-24 05:44:08

React Native 使用问题记录的相关文章

我们一起学React Native(一):环境配置

最近想在项目中实现跨平台,对比一下主流的实现方式,选用了React Native.参考网上的教程,对于一直都是原生移动端开发,对前端的知识不是很了解的,感觉入门不是特别简单.于是打算把学习React Native的过程记录下来. 环境配置 基本参考React Native中文网搭建开发环境教程 搭建开发环境 安装流程就不详细写了,毕竟平台不同,系统原有软件的版本也不同,就算再详细下出来,也很难涉及全,可参考价值不大,况且React Native中文网写得很全面了. 我自己homebrew,Nod

【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2147.html React Native 这里不多介绍,其实就是个跨平台开发原生应用的开源引擎. 更详细的介绍,大家可以搜索"facebook react native" 或 "taobao react native" 附上 React Native 官方网站:http://react

【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2248.html 今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator 一:Navigator 对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面.这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,

【React Native开发】React Native进行签名打包成Apk

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50525976 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是React Nativ

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

React Native环境配置

该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不FQ的话安装慢成狗呀) 1. 安装 xcode 做过ios相关开发的都知道这个,作为ios开发的首席IDE,直接从Apple Store搜索下载就可以了. 2. 安装 brew brew也要Homebrew,它是什么呢?官网的解释是: Homebrew installs the suff you n

iOS版 React Native 环境搭建

今天没事,搞了搞React Native,也都是才开始弄,并没有感受过它的强大,嘿嘿.今天算是demo可以跑了吧.特此记录一下搭建过程,留着日后使用. 特此声明,才过程,不保证百分百成功,因为本人在搭建的时候参考了好多东西相关文章,还请各位看官自请斟酌,啦啦啦啦我都是这么"负责任". 极客学院的官方文档中文版 -- 特此奉上-- 传送门  主要的学习参考对象, 此内容中可以看到英文文档 此外,安装步骤参考的是,这篇文章,这里记录是为了自己观看方便,和参考文章有点出入 搭建步骤如下: H

React Native入门遇到的一些问题

本文示例参考自<React Native第一课> React Native官方文档中文版(含最新Android内容) 这里只大概记录下我的操作步骤和遇到的问题,一定要牢记下面这条: 如果你在Mac下遇到提示写入权限时,记得在命令前加上sudo     安装开发所需要的环境,参考这里>>   我所遇到的几个问题: 1) 安装brew curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/

React Native环境配置之Windows版本搭建

接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催.然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head First Html5 Programming(中文版)这本书讲的很有意思,但是学习了大半本就想自己动手练练,所以得找个框架玩玩.另外之前也就听说过React Native很火,火了半个地球了,而且它号称"Learn once,write anywhere"这句话在移动开发猿眼里意味着什么呢,我不