关于react native的快捷键和常用规范

一:快捷键

1.让其自更新----shift+cmd+z 选择热更新

2.cmd+r ---重新刷新

3

二:常用规范:

1.文件也是一种组件 所以应该命名规则和组件名的命名规则相同  -----使用首字母大写 驼峰样NextPage

三:技巧 :

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

2.img使用技巧

1:网络资源

<Image source={{uri:‘http://xxxxx/png‘}}  />

2.本地资源

<Image source={require(‘image!lealogo‘)} />

3.背景图片backgroundImage(一定要设置后面的属性)

<Image source={require(‘image!lealogo‘)} style={{backgroundColor:‘transparent‘}}> 

4.整屏背景<full screen> (先设置包裹flex:1 ,然后图片也设置flex:1 全部伸缩)


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  }});

flex布局

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

绝对定位和相对定位

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

http://www.jianshu.com/p/26dffb845046  自己看吧···

时间: 2024-10-12 08:14:02

关于react native的快捷键和常用规范的相关文章

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

React Native之语法规范

好的代码规范能够提高代码的可读性便于协作沟通 1.React Native编码规范 https://github.com/JasonBoy/javascript/tree/master/react

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

react native 常用组件汇总

react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 https://github.com/jpush/jpush-react-native react-native-jpush 由 React Native 中文网开发维护. https://github.com/reactnativecn/react-native-jpush pouchdb-re

React Native调试技巧与心得

转自:http://blog.csdn.net/quanqinyang/article/details/52215652 在做React Native开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Native程序调试的一些技巧和心得. Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React

React Native之React速学教程(下)

概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑. ES6的特性 何为ES6? ES6全称ECMAScript 6.0,ES6于2015年6月17日发布,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262.

我的 React Native 技能树点亮计划 の Javascript 模块管理器 npm

@author ASCE1885的 Github 简书 微博 CSDN 知乎 本文由于潜在的商业目的,不开放全文转载许可,谢谢! npm,全称是 node package manager,顾名思义最开始是作为 Node 的包管理器存在的.不过经过不断的发展和壮大,现在的 npm 早就不再局限于 Node 的范畴,已经成为 Javascript 的包管理器,看看下面的 npm 官网首页介绍就知道了: 本系列教程假设你已经按照 React Native 官方入门指南安装好相关的环境(尤其是 Node

React Native项目实战

算是学习React Native的一次项目总结吧,目的还是提高自己. 包含的内容: 1>仿"美团"页面的实现; 2>封装项目中和自己常用的一些组件; 3>学习别人源码的项目,自己动手实现了一遍,里面添加自己的代码规范; 4>第三方开源库的使用; 5>添加项目中常见的功能和界面的实现<后面持续更新!> 传送门: https://github.com/PengSiSi/PSMeiTuan 暂时没有添加README.md,后续添加... 有兴趣的和我