react-native 🔥了这么久了，坑填的也差不多了，送上一篇开发过程中的一些小技巧.
reactjs
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)
<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>
style写法
<pre>
<code>
style={{paddingLeft:20,paddingTop:20,backgroundColor:'red'}}
</code>
</pre>class写法
<pre>
<code>
style={styles.textClass}
</code>
</pre>
img使用方式
<p>
网络资源
<pre>
<code>
<Image source={{uri:'http://xxxxx/png'}} />
</pre>
</code>本地静态资源
<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
Debug in Chrome
弹出的页面中打开开发者调试工具,就能看到你的源码
关闭也很简单 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库选择
ParseJS
super-agent
https://github.com/visionmedia/superagent
jsx
jsx官方文档
http://jsx.github.io/doc.html
1.延展属性妙用
var props = { foo: 'default' };
var component = <Component {...props} />;
延展属性(传入对象的属性 将被复制到组件内)
注释
- 组件内注释
<pre>
<core>
var content = (
<Nav>
{/* child comment, put {} around /}
<Person
/ 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
