ReactNative 使用技巧

react-native 了这么久了，坑填的也差不多了，送上一篇开发过程中的一些小技巧.

reactjs

http://h5shop.org/article/50/

NavigatorIOS 按钮图标设置

initialRoute={{
rightButtonIcon : require('image!search'),
leftButtonTitle : "西安",
component : componentView,
title : tabName,
passProps : {test : "111"}
}}
leftButtonTitle ｜ righButtonTitle 设置按钮文字
leftButtonIcon | xxx 设置按钮icon

修改navbar的颜色

对应一下几个值
barTintColor='#000', 导航背景
titleTextColor='#fff' 导航字体颜色
tintColor='#fff' 导航按钮颜色

scrollview 嵌套 listview

导致listview 出现滚动条解决办法设置listview的
automaticallyAdjustContentInsets={false}

This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent

require()路径问题检查文件名等检查依赖地址释是否正确

可用样式表
http://blog.csdn.net/sbsujjbcy/article/details/50017029

jsx

jsx loop 循环
https://segmentfault.com/a/1190000003748270
1 : 匿名方法
{
(function(){}) (1,2,3)

}

2 : map
{

xxx.map(object,i){
return xxx
}

}

3.使用封装好的指令

es6的语法解释

http://www.ghugo.com/react-native-es6/

ListView

listview 贴顶
automaticallyAdjustContentInsets={false}

2.listview中item 需要设置高度
设置外层高度才能使得 column元素垂直居中
height : 110

Text元素

也就是如果Text元素在Text里边，可以考虑为inline，（不能设置 margin padding top等）
如果单独在View里边，那就是Block。 (理解为一个不能设置padding的block)

First part and
second part

// View container: each text is its own block
// |First part |
// |and |
// |second part|

行内样式与class

style写法


 
 style={{paddingLeft:20,paddingTop:20,backgroundColor:'red'}}

class写法
```
 
 style={styles.textClass}
 
 
```

img使用方式

网络资源
```
 
 
 
```
本地静态资源
```
 
 
 
```

3.背景图片backgroundImage

4.整屏背景


  
 'use strict'; 
 var React = require('react-native'); 
 var {
 AppRegistry,
 StyleSheet,
 View,
 Image
 } = React; 
 var TestCmp = React.createClass({
 render: function() {
 return (
 
 
 
 );
 }
 }); 
 var styles = StyleSheet.create({
 imageContainer: {
 flex: 1,
 alignItems: 'stretch'
 },
 image: {
 flex: 1
 }
 });

调试工具

可以直接使用chrome dev tools 进行调试
在模拟器上command + D

Paste_Image.png

Debug in Chrome

Paste_Image.png

弹出的页面中打开开发者调试工具,就能看到你的源码

关闭也很简单 command + D 选择关闭

flex布局

view默认宽度为100%
flex模拟 column 水平居中用alignItems, 垂直居中用justifyContent 方向为row的相反
基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug

绝对定位和相对定位

和css的标准不同的是，元素父容器不用设置position：'absolute|relative' . 默认相对于父容器进行位移.

facebook css layout

https://github.com/facebook/css-layout

xhr库选择

fetch
https://github.com/github/fetch
ParseJS
super-agent
https://github.com/visionmedia/superagent

jsx

jsx官方文档
http://jsx.github.io/doc.html

1.延展属性妙用

var props = { foo: 'default' };
var component = ;

延展属性(传入对象的属性将被复制到组件内)

箭头函数
https://www.imququ.com/post/arrow-function-in-es6.html

注释

组件内注释


 
 var content = (
 
 {/* child comment, put {} around /}
 <Person
 / multi
 line
 comment */
 name={window.isLoggedIn ? window.name : ''} // end of line comment

);

组件内使用 {/* child comment, put {} around */}
组件属性注释 /* child comment */

题外

http://www.stuq.org/ppt/qcon2015/2a5d9377caceed899f1c2d14097285fc/2

oc
http://blog.csdn.net/lihuiqwertyuiop/article/details/45241909