学习ReactNative一个月的笔记

2016年7月ReactNative跳坑记录


1.添加组件属性,有一个地方需要注意,就是class属性需要写成 classNamefor 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

2.在genymotion上进行模拟的时候,一定要关闭电脑的防火墙,并且要把手机的wifi连上 (好像5.0以上的版本不会自动连接wifi),将模拟器的ip和端口设置为可访问本机的ip(10.0.3.2:8081),如果是在手机上的话,也是可以打开网页尝试是否可以访问,可以访问后再将ip添加进genymotion的设置里面。

3.React Native的打包器会首先寻找File.<platform>.js文件,然后再去寻找 File.js 。这就允许我们将Android平台的代码放置到 File.android.js , iOS 的放入到 File.ios.js , 以及Web平台的代码放入到 File.js, 而不需要改变导入的声明 ./File。

4.在ES6中,变量的解构赋值用途很多,交换变量的值可以用这个奇妙的方法[x, y] = [y, x]。

5.当你Image加载一个网络图片时,如果你不给该Image设置widthheight,那你将什么都看不到。这还不算,当你使用ListView时如果该组件同时存在一个兄弟元素,那么此时ListView必须设置height,否则你会发现它不再响应用户的滚动操作。。。这个地方所说的widthheight是指的在style属性中设置的值,如果直接设置height属性的话是不会起作用的。

6.使用fetch时,当你试图提交附件表单数据的时候,请一定要使用FormData对象将数据包裹如果你只是普通的json提交,就按照官方例子来做:

fetch(API_LOGIN_URL, { 
  method: 'POST', 
  headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
  }, 
  body: JSON.stringify({ 
     account: this.state.account, 
    password: this.state.password
  }) 
});

7.FB提供了Dimensions组件可以用来获取屏幕的当前尺寸:

var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;

8.当你打算在某个控件上套用设置好的某个样式,但需要单独为其设置一个额外特殊值时,你可以这样:<View style={[styles.demo, {backgroundColor: "blue"}]}></ View>

9.也就是如果Text元素在Text里边,可以考虑为inline元素, 如果单独在View里边,那就是Block。

10.我把View设置了justifyContent: 'center',alignItems: 'center'的样式,并在里面放上了一个ViewPagerAndroid,这个时候如果不给他设置固定的宽度或者使用padding撑开他的话是看不见的,大概是因为被View的style设置压成了类似inline的属性。

11.只有View组件在设置borderRadius属性过后,才会将自身的border一齐转变成圆角,其他元素比如Image和Touchable类的都不会有任何反应,边角是方的。

12.如果突然出现了,不显示图片的情况,可以给他加一个边框,这样可以确定是没有找到资源还是布局错误,我非常意外的发现只需要设置borderWidth为0就可以让图片显示出来。(改:比较大的图片有时候都不会显示出来,这就很尴尬了)

13.在设置react-native-swiper的点的样式的时候,不能传入函数返回值,需要直接传入一个Element对象,我不知道是哪里出了错:

class Dot extends Component{ 
  render(){ 
    return( 
      <View style={
          {backgroundColor: 'rgba(0,0,0,.2)',
            width: 2, 
            height: 2, 
            borderRadius: 10, 
            marginLeft: 3, 
            marginRight: 3, 
            marginTop: 3, 
            marginBottom: 3       
      }}/>
     ); 
  }
}

如果我传入Dot.render()系统会报错,提示我是一个空元素,但是直接传入View就可以成功。

14.RN中元素默认的定位方式是 relative ,并且只有relative 和 absolute 两种定位方式。如果为组件加上 position:absolute ,它将会以inline的方式渲染在页面上。并且脱离正常文档流。也就是视觉上会被后面的组件覆盖,但不能通过zIndex方式调整。嵌套的Text不可用。

15.在给控件写style属性的时候,尽量用一个View包起来,因为有很多控件的style样式无法应用,浪费调试时间。

16.在调试代码的时候,要时刻注意this的指向,比如在下面的例子中,console.log中的this就指向了Drawer,变成了调用他的this了,renderNavigationView`有毒,他会调用传入的函数方法,并且把里面的this指针强行指向自己。

class main extends Component{ 
  navigationView(){ 
    console.log(this); 
  } 
  render(){ 
    return( <DrawerLayoutAndroid renderNavigationView={this.navigationView} >
              ............. 
            </DrawerLayoutAndroid> ); 
  }
}

17.如果将文字放在图片下方,但是只设置了图片的宽度,可能会导致文字不会紧贴图片下方的问题,如下就会出现此种问题,这个时候设置上height就行了。

<View style={{justifyContent:"center",alignItems:"center"}}> 
    <Image source={require('')} style={{width:120}} resizeMode="contain"/> 
    <Text>没有找到你的缓存哟</Text>
</View>

18.hairlineWidth:CallExpression用来定义当前平台最细的宽度。该属性用来设置边框或者两个组件之间的分割线。javascript{ borderBottomColor: '#bbb', borderBottomWidth: StyleSheet.hairlineWidth}会根据当前平台信息,自动转换成一根很细的线。

19.推库上这篇文章《React Native 触摸事件处理详解》 关于手势处理的,非常有用!!!!!!!

现在正在做一个RN的小项目,模仿Bilibili的最新app,适合新手拿来理解,大家可以看一下顺便帮我点个star哦~

React-Native-Bilibili 哔哩哔哩( ̄▽ ̄)~■干杯□~( ̄▽ ̄)

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,376评论 25 707
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,809评论 1 18
  • <一>编写Hello World React Native看起来很像React,只不过其基础组件是原生组件而非we...
    AFinalStone阅读 1,018评论 0 2
  • 初创企业是有利于社会的,并且他们确实需要天使投资人来帮助其起步和打下坚实的基础。创业本质上就是一笔生意,但是他不仅...
    WenryXu阅读 412评论 0 0
  • 你见过凌晨五点钟这座城市的模样吗? 今日得见不是因为我早起, 而是因为我彻夜未眠。 昨晚喝了一晚的茶,亢奋了神经;...
    乐尽天真且陶陶阅读 875评论 0 0