react native 包学不包会系列--react native开发基础知识

git

关于git的具体使用，能够查看个人另一篇比较详细的git实用记录

jsx

jsx它不是一种新的开发语言，它是一种语法方案: 一种能在javascript中直接书写html标签的语法糖，因此它本质上仍是js，是js的一种优雅语法糖 固然并非必需要学习jsx你才能够开始React Native，jsx是为构造React元素方法React.createElement(component, props, ...children)设计的语法糖。 比方说JSX代码：

<Elem color="red" info="hello">Hello!<Elem/>
复制代码

用标准的React语法写出来应该是：

React.creatElement({
  Elem,
  {
    color:red,
    info:"hello"
  },
  "Hello!"
});
复制代码

可是以个人使用经验，jsx在定义html这种树形结构时，简单明了，极大地提升了咱们的开发与维护效率。就是一个能够事半功倍的东西，花点时间学学，何乐不为呢。而强大的babel就为咱们作了这个jsx的语法糖解析工做，若是想要看jsx与js的语法转换，能够看这边
关于jsx的具体用法，看这里
具体的使用方法我这边就说了，其实很简单，对前端来讲也是很快上手，就说几个在使用过程当中要注意的点：

• 用户自定义的组件首字母必须大写，一个组件只能有一个顶层对象，无论在react仍是react native中毅然
• 若是是在react项目中， 自定义标签必须在react的做用范围内
• 可使用符号【.】来调用子组件
• 组件的开始标签和闭合标签之间的内容是一个特殊的props——props.children，组件嵌套中的全部内容也都是props.children

flexbox

各位前端开发，应该都知道布局对网页开发的重要性，而如雷贯耳的盒子模型，让咱们来回顾一下：

css的盒子模型，依赖于postion、float、以及display三者来进行布局，可是对于一些经常使用可是特殊的布局好比垂直居中，实现起来就不够优雅了。（若是你对盒子布局如何解决各类布局要求有兴趣，看 这里）而flexbox，即弹性盒子布局，即便容器与容器元素的大小未知或者动态性的，均可以控制他们的布局。flexbox布局的主要思想就是让容器有能力让其子元素可以改变其宽度，高度，顺序，以你想要的最佳方式在空间中布局，这使得flexbox布局可以很灵活地使用全部类型的设备于屏幕大小。而React Native的布局基础就是flexbox布局，不只使得ui开发更加简便，也很好地解决了ios与按照的屏幕适配问题

react native 实现的flexbox布是会跟web布局有所细微的不一样，好比flex-direction 的默认值是column不是row，align-ITEM的默认值是stretch而非flex-start，还有flex只能指定一个数字值。可是没有关系，这些不是很大的学习障碍

让咱们来了解下flexbox的属性值： 父元素的属性： 父元素不用设置display：flex，第一步就跟web不一样了哈，由于默认都是display:flex flexDirection: column(默认值)、 row、 row-reverse flexWrap 当子组件内容溢出父组件的时候，是否须要换行 取值：