react-native

记一下从开始到第一个项目中的问题。

01.expected a component class gotobject

importMessageDetailViewContainerfrom'./Messagedetail/MessageDetailViewContainer';

if(key ==='messageDetail'){

return

}

组件首字母要大写

02.dependencies与devDependencies的区别

devDependencies下列出的模块,是我们开发时用的依赖项,像一些进行单元测试之类的包,比如grunt-contrib-uglify,我们用它混淆js文件,它们不会被部署到生产环境。dependencies下的模块,则是我们生产环境中需要的依赖,即正常运行该包时所需要的依赖项。

如果你将包下载下来在包的根目录里运行,执行如下命令,默认会安装两种依赖

npm install

如果你只是单纯的使用这个包而不需要进行一些改动测试之类的,只安装dependencies而不安装devDependencies。执行:

npm install--production

通过“npm install

packagename”进行安装,只会安装dependencies

npm installpackagename

如需安装devDependencies,执行:

npm installpackagename --dev

03.export default , export区别:import的时候export不带{} export要带{},export

default只能有一个

04.rest语法

functionanimals(...types){

console.log(types)

}

animals('cat','dog','fish')//["cat","dog","fish"]

而如果不用ES6的话,我们则得使用ES5的arguments。

05.()=>arrow function

不用指定this,当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

06.继承

classAnimal{

constructor(){

    this.type ='animal'

}

says(say){

   console.log(this.type +' says '+ say)

}

}

letanimal =newAnimal()

animal.says('hello')//animal says hello

classCatextendsAnimal{

constructor(){

super()

 this.type ='cat'

}

}

let cat=newCat()

cat.says('hello')//cat says hello

constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

一个组件的组织结构

1classdefinition

    1.1constructor

        1.1.1event handlers

    1.2'component'lifecycle events

    1.3getters

    1.4render

2defaultProps

3proptypes

PropTypes和getDefaultProps()

1.一定要写PropTypes,切莫为了省事而不写

2.如果一个Props不是requied,一定在getDefaultProps中设置它

React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型,如果不正确,console中就会出现对应的warning。出于性能方面的考虑,这个API只在开发环境下使用。

基本使用方法:

propTypes: {

myArray: React.PropTypes.array,

myBool: React.PropTypes.bool,

myFunc: React.PropTypes.func,

myNumber: React.PropTypes.number,

myString: React.PropTypes.string,

// You can chain any of the above with `isRequired` to make sure a warning

// is shown if the prop isn't provided.

requiredFunc: React.PropTypes.func.isRequired

}

假如我们props不是以上类型,而是拥有复杂结构的对象怎么办?比如下面这个:

{

text:'hello world',

numbers: [5,2,7,9],

}

当然,我们可以直接用React.PropTypes.object,但是对象内部的数据我们却无法验证。

propTypes:{

myObject:React.PropTypes.object,

}

进阶使用方法:shape()和arrayOf()

propTypes:{

myObject:React.PropTypes.shape({

text: React.PropTypes.string,

numbers: React.PropTypes.arrayOf(React.PropTypes.number),

})

}

下面是一个更复杂的Props:

[

{

name:'Zachary He',

age:13,

married:true,

},

{

name:'Alice Yo',

name:17,

},

{

name:'Jonyu Me',

age:20,

married:false,

}

]

综上,:

propTypes:{

myArray:React.PropTypes.arrayOf(

React.propTypes.shape({

name: React.propTypes.string.isRequired,

age: React.propTypes.number.isRequired,

married: React.propTypes.bool

})

)

}

07.如果想让子view实现100%的效果可以设置left:0 ,right :0,同理height可以用top:0,bottom:0

08.使用text的numberOfLines可以实现文本截取省略号,即css的text-overflow属性

09.react native里面没有z-index的概念,是根据jsx语法里面定义组件的顺序来实现的,后写的组件会覆盖在先写的组件上

UIManager

模块数据结构,JS端可访问:

UIManager.[UI组件名].[Constants(静态值)/Commands(命令/方法)]

从端上映射的方法:(部分)

·createView(int

tag, String className, int rootViewTag, ReadableMap props)

创建View

·updateView(int

tag, String className, ReadableMap props)

更新View

·manageChildren(int

viewTag, Array moveFrom, Array moveTo, Array addChildTags, Array addAtIndices,

Array removeFrom)

批量添加/删除/移动一个view下面的view

·measure(int

reactTag, Callback callback)

测量View的位置、size等,结果异步回调

·measureInWindow(int

reactTag, Callback callback)

测量View相对屏幕的位置、size等,结果异步回调

·dispatchViewManagerCommand(int

reactTag, int commandId, ReadableArray commandArgs)

派发View命令,也就是用来调用对应View的方法

这个模块是NativeModule方式定义的,在RN的JS端启动时,端上会通过JSC把收集到的模块信息(名称)打到JS端全局变量global.__fbBatchedBridgeConfig中,并采用延迟加载策略:设置NativeModules.[模块名]的getter,延迟通过JSC读取模块详细信息(方法、命令号等信息)。在调用的时候会放到MessageQueue的队列里,批量提交,两次批量提交限制的最小间隔为5ms。

10.NativeMethodsMixin 

react-native中直接访问原声组件的方法

11.array.map(function(currentValue,index,arr),thisValue)

12.react-native没有z-index的概念后写的组件在新写的上边,所以一个view中放一个图片view并不能挡住图片超出view的部分。(为图片设置与view一样的style即可)

13.用循环渲染组件

会出现key的问题例如Warning: Each child in an array or iterator should have aunique "key" prop. Check the render method ofListView.解决方法:为每个子组件添加key,但是不能重复。

14.Array.map()array.foreach()

优先级map>foreach>for

foreach的返回值并不是数组,所以不能写链式代码

15.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容