1.2HelloWorld

看一下入门教程http://reactnative.cn/docs/0.44/tutorial.html#content

说我们要关注的文件是：index.android.js。（本人用的是windows开发环境，由于熟悉安卓，先从安卓模块看起）。

 

打开该文件，查看头部

明显是导入一些包，就是说要引用这些库里面的函数。

 

看下一段代码

看第一句 export default class BGCommunity extends Component 

明显说的是BGCommunity继承于组件，这个BGCommunity跟我们的工程名称相同，说明程序应该是默认进这个类的，然后去执行他的 render()方法。

    然后再看render里面的内容，有一个View跟好几个Text，看Text里面包裹的文字

        " Welcome to React Native! "

明显就是我们刚刚看的界面显示的内容。就是说这里显示了三段文字，这跟我们看到的效果是一样的。然后Text里面还有个style，看名称应该是样式。我们查看一下样式，按

住键盘ctrl，再用鼠标去点击styles

跳转到styles代码:

这里一眼看到有三种样式，其中的welcome跟instructions分别被刚刚的三个Text的style所引用，container被View所引用。
    看第一句 const styles = StyleSheet.create
经百度得知 const 是声明一个只读常量，应该是类似于final？而styles应该是存放各种styles的一个集合，StyleSheet.create就是创建这么一个集合。
flex：由flex-grow、flex-shrink、flex-basis组合而成，默认值分别是默认值是 0 1 auto。flex:1代表 flex-grow:1,flex-shrink:1,flex-basis:0%。即占满整个空间。
可以暂时理解为占空百分比，如果有三个控件，分别是flex:1,flex:1,flex:2，那么占比为25%:25%:50%。下面是详细解释（可以不看，省得困惑又忘记前面学到的内容）
flex-grow：该属性来设置，当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。flex-grow的默认值为0，
意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
flex-shrink：该属性来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。flex-shrink的默认值为1，
当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。
flex-basis:初次见flex-basis这个属性，还挺疑惑的，不知道它是用来干嘛的。后来研究发发现，这个属性值的作用也就是width的替代品。如果子容器设置了
flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器。如果同时设置flex-basis和width，那么width属性会被覆盖，也就是说flex-basis的优先级比width高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高
 
justifyContent:如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。
    flex-start(default) 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
    flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
    center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
    space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
    space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
alignItems:属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。
flex-start 元素向侧轴起点对齐。
flex-end 元素向侧轴终点对齐。
center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

backgroundColor:背景颜色
fontSize:字体大小
textAlign：文本对齐方式
 margin:与其他控件距离多少单位
color:颜色
marginBottom：距离底部多少
 
再看代码最后一行：AppRegistry.registerComponent('BGCommunity', () => BGCommunity);
这里明显是将我们刚刚的类注册到应用中
 
至此完成HelloWorld项目的建立与分析