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

1. listview 贴顶
   automaticallyAdjustContentInsets={false}

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

Text元素

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

<Text>
<Text>First part and </Text>
<Text>second part</Text>
</Text>
// Text container: all the text flows as if it was one
// |First part |
// |and second |
// |part |

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

行内样式与class

<p>

1. style写法
   <pre>
   <code>
   style={{paddingLeft:20,paddingTop:20,backgroundColor:'red'}}
   </code>
   </pre>

2. class写法
   <pre>
   <code>
   style={styles.textClass}
   </code>
   </pre>

img使用方式

<p>

1. 网络资源
   <pre>
   <code>
   <Image source={{uri:'http://xxxxx/png'}} />
   </pre>
   </code>

2. 本地静态资源
   <pre>
   <code>
   <Image source={require('image!lealogo')} />
   </pre>
   </code>

3.背景图片backgroundImage

<pre>
<code>
<Image source={require('image!lealogo')} style={{backgroundColor:'transparent'}}>
<Text >1111</Text>
</Image>
</code>
</pre>

4.整屏背景<full screen>
<pre>
<code>

'use strict';

var React = require('react-native');

var {
AppRegistry,
StyleSheet,
View,
Image
} = React;

var TestCmp = React.createClass({
render: function() {
return (
<View style={styles.imageContainer}>
<Image style={styles.image} source={{uri: 'http://lorempixel.com/200/400/sports/5/![enter image description here][2]'}} />
</View>
);
}
});

var styles = StyleSheet.create({
imageContainer: {
flex: 1,
alignItems: 'stretch'
},
image: {
flex: 1
}
});

</code>
</pre>

调试工具

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

Paste_Image.png

Debug in Chrome

Paste_Image.png

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

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

flex布局

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

绝对定位和相对定位

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

facebook css layout

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

xhr库选择

1. fetch
   https://github.com/github/fetch

2. ParseJS

3. super-agent
   https://github.com/visionmedia/superagent

jsx

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

1.延展属性妙用

var props = { foo: 'default' };
var component = <Component {...props} />;

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

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

注释

1. 组件内注释
   <pre>
   <core>
   var content = (
   <Nav>
   {/* child comment, put {} around /}
   &ltPerson
   / multi
   line
   comment */
   name={window.isLoggedIn ? window.name : ''} // end of line comment

</Nav>
);
</code>
</pre>

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

题外

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

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