ReactNative 使用技巧

2015-05-27 本文已影响8391人 sherlock221b

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)

<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

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布局

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

绝对定位和相对定位

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

1.延展属性妙用

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

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

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

注释

组件内注释
<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