webstorn的激活碼

http://blog.csdn.net/it_talk/article/details/52448597

React Native 異常處理

https://hacpai.com/article/1497235254333

第一次應用程序

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//React是默認組件 非默認組件需要加{}
import React, { Component } from ‘react‘;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from ‘react-native‘;

// 什麽時候用{}，包裝對象的時候使用{}
// 什麽時候用{}，表達式需要用{}
// 什麽時候用{}，變量需要用{}
// 什麽時候使用（），包裝組件標簽的時候，必須使用（）

//自定義，程序的入口組件
class reactNativeDemo extends Component {
    /*系統默認調用該方法，當一個組件要顯示的時候，就會自動調用該方法
      render(){


      }
    */

    render(){

      var str = ‘gogogogo‘
      return(
          <View style={styles.mainViewStyle}>

            <Text>{str}</Text>


          </View>

      )

    }


}

//樣式表，定義變量用var
var styles = StyleSheet.create({
    mainViewStyle : {
      //占據全屏
      flex:1,
      backgroundColor : ‘red‘

    }

})

//註冊程序入口組件
//第一個參數：模塊名稱，隨意填，與IOS的模塊名稱一一對應
//第二個參數：函數，箭頭函數 ES6
//箭頭函數 => 左邊：函數參數 ，右邊，函數返回值
AppRegistry.registerComponent(‘reactNativeDemo‘, () => reactNativeDemo);

margin:外間距：如果是第一次子空間，參照父空間位置。如果不是第一個子空間，參照上一個

註意：margin可能與width，height沖突

註意：當設置了尺寸：寬度，高度，marginBottom，marginRight，可能無效，marginLeft，marginTop肯定有效

padding,內邊距：相對自身內容移動的距離

絕對定位：參照父控件

相對定位：參照控件本身

CSS：控制一個子控制器的時候

如果一個控件中有很多個子控件用flex

Flex主軸和側軸

• Flex中有兩個主要的概念：主軸和側軸
• 主軸與側軸的關系：相互垂直的。
• 主軸：決定容器中子組件默認的布局方向：水平，垂直
• 側軸：決定容器中子組件與主軸垂直的布局方向
  • 比如主軸水平，那麽子組件默認就是水平布局排布，側軸就是控制子組件在垂直方向的布局

flexDirection屬性

• flexDirection:決定主軸的方向，水平或者垂直，這樣子組件就會水平排布或者垂直排布
• flexDirection共有四個值，在RN中默認為column。　　

row（默認值）：主軸為水平方向，從左向右。依次排列
row-reverse：主軸為水平方向，從右向左依次排列
column：主軸為垂直方向，默認的排列方式，從上向下排列
column-reverse：主軸為垂直方向，從下向上排列

flexWrap屬性

• flexWrap:決定子控件在父視圖內是否允許多行排列。
• flexWrap共有兩個值，默認為nowrap。

nowrap 組件只排列在一行上，可能導致溢出。
wrap   組件在一行排列不下時，就進行多行排列

justifyContent屬性

• justifyContent:決定子組件在主軸中具體布局，是靠左，還是居中等
• justifyContent共有五個值，默認為flex-start

flex-start: 子組件向主軸起點對齊，如果主軸水平，從左開始，主軸垂直，從上開始。
flex-end 子組件向主軸終點對齊，如果主軸水平，從右開始，主軸垂直，從下開始。
center 居中顯示，註意：並不是讓某一個子組件居中，而是整體有居中效果
space-between 均勻分配,相鄰元素間距離相同。每行第一個組件與行首對齊，每行最後一個組件與行尾對齊。
space-around 均勻分配,相鄰元素間距離相同。每行第一個組件到行首的距離和每行最後一個組件到行尾的距離將會是相鄰元素之間距離的一半

作者：袁崢
鏈接：http://www.jianshu.com/p/cc2e517ef23b
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。

alignItems屬性

• alignItems:決定子組件在測軸中具體布局
  • 一直都沒有管過側軸，如果側軸垂直，決定子組件在上，還是下，或者居中
• alignItems共有四個值，默認為stretch。

flex-start 子組件向側軸起點對齊。
flex-end 子組件向側軸終點對齊。
center 子組件在側軸居中。
stretch 子組件在側軸方向被拉伸到與容器相同的高度或寬度。

alignSelf屬性

• alignSelf:自定義自己的側軸布局，用於一個子組件設置。
  • 註意：當某個子組件不想參照默認的alignItems時，可以設置alignSelf，自定義自己的側軸布局。
• alignSelf共有五個值，默認為auto。

auto 繼承它的父容器的alignItems屬性。如果沒有父容器則為 "stretch"
flex-start 子組件向側軸起點對齊。
flex-end 子組件向側軸終點對齊。
center 子組件在側軸居中。
stretch 子組件在側軸方向被拉伸到與容器相同的高度或寬度。

flex屬性

• flex: 決定子控件在主軸中占據幾等分。

• flex: 任意數字，所有子控件flex相加，自己flex占總共多少，就有多少寬度.

React nativede的筆記