ReactNative|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.registerComponentrequire()路径问题 检查文件名等 检查依赖地址释是否正确
可用样式表
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}
设置外层高度才能使得 column元素 垂直居中
height : 110
Text元素
- 也就是如果Text元素在Text里边，可以考虑为inline， （不能设置 margin padding top等）
- 如果单独在View里边，那就是Block。 (理解为一个不能设置padding的block)
// Text container: all the text flows as if it was one
// |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}
【ReactNative|ReactNative 使用技巧】
- 网络资源
- 本地静态资源
1111
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官方文档
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 */}
组件属性注释 /* child comment */
题外
http://www.stuq.org/ppt/qcon2015/2a5d9377caceed899f1c2d14097285fc/2
oc
http://blog.csdn.net/lihuiqwertyuiop/article/details/45241909
推荐阅读
- Xcode(7.2)|Xcode(7.2) 使用技巧(2)
- JavaScript|JavaScript Promise 的使用技巧
- mac如何android设备上运行react-native
- react-native|react-native 封装首页图标组件
- JAVA|intellij idea使用技巧汇总
- React-Native|React-Native 学习第二天（Props（属性））
- 高仿京东Android App，集成React-Native热更功能
- ASP.NET中Response.BufferOutput属性的使用技巧
- Macbook|Macbook 自带词典使用技巧
- 接口测试工具使用技巧——Apipost