/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

//PropTypes 使用屬性是必須導(dǎo)入
import React,{ Component , PropTypes } from 'react';

//使用控件時必須導(dǎo)入,StyleSheet創(chuàng)建屬性是必須導(dǎo)入
import {AppRegistry, Text , Image , View , StyleSheet} from  'react-native';

//export default 必須寫，導(dǎo)出，外部才可以訪問
export default class test extends Component {

  render(){//所喲的類必須有自己的reder方法，用于輸入組件，return里面必須返回一個組件,只能是一個組件，多個用view包裹


//在此可以聲明變量
      let picURL = {//參數(shù)必須為uri，其他的圖片顯示不出來
        uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
      };

      return (
          /*
          * 加載圖片
          *
          * 加載網(wǎng)絡(luò)圖片，必須要指定寬和高，不然顯示不出來，網(wǎng)絡(luò)圖片不確定圖片的size
          *
          * 加載本地圖片，不需要指定寬和高，當(dāng)然也可以自定義，因為本地圖片確定了圖片的size
          * */

          //使用自定義控件時，只給它的屬性賦值即可

          <View style={ViewStyle.myStyleSelect}>


            <Image source={picURL} style={{width: 100, height:100}}></Image>


            <Image source={require('./image/cat1.jpg')} style={ViewStyle.myStyleSelect1}></Image>

            <Greetings abc="jick"/>
            <Greetings abc="luch"/>
            <Greetings abc="math"/>


            <Person name={'于小寶'} age={23}/>
            <Person name={'李大頭'} age={34}/>
          </View>
      );
  }

}

//自定義控件，顯示格式統(tǒng)一'hello+字符串'，所以可以自定義一個view自帶hello，填入后面的字符串即可
class Greetings extends Component {
  render(){

    return(

      <Text>Hello {this.props.abc} !</Text>//hello+屬性字符串

    );

  }
}

//自定義控件，聲明兩個屬性name和age，返回文本
class Person extends Component {

//聲明屬性的方法
    static propTypes={

        name :PropTypes.string,//指定屬性的類型
        age  :PropTypes.number

    };



    render(){


      return(
          <Text style={{fontWeight:'bold',lineHeight:30}}>姓名：{this.props.name};年齡：{this.props.age}</Text>
    );


  }


}

//自定義樣式，里面可以指定多個樣式，使用時 ViewStyle.myStyle 即可
var ViewStyle =StyleSheet.create({

    myStyle:{
        alignItems:'center',
    },
    myStyleSelect:{
        alignItems:'center',
        backgroundColor:'red',
        borderWidth:2,
        borderColor:'#00ff00',
        borderStyle:'dotted',

    },
    myStyleSelect1:{
        bottom:20,
        left:20,

    }

});

/*
*ReactNative中能使用的css樣式
 Valid style props: [

 "alignItems",居中對齊彈性盒的各項 <div> 元素
 例：alignItems:'center',
 -> stretch(項目被拉伸以適應(yīng)容器)
 -> center(項目位于容器的中心)
 -> flex-start(項目位于容器的開頭)
 -> flex-end(項目位于容器的結(jié)尾)
 -> baseline(項目位于容器的基線上)
 -> initial(設(shè)置該屬性為它的默認值)
 -> inherit(從父元素繼承該屬性)

 "alignSelf",居中對齊彈性對象元素內(nèi)的某個項
 例：alignSelf:'center',
 -> auto(默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch")
 -> stretch(項目被拉伸以適應(yīng)容器)
 -> center(項目位于容器的中心)
 -> flex-start(項目位于容器的開頭)
 -> flex-end(項目位于容器的結(jié)尾)
 -> baseline(項目位于容器的基線上)
 -> initial(設(shè)置該屬性為它的默認值)
 -> inherit(從父元素繼承該屬性)

 "backfaceVisibility",當(dāng)元素不面向屏幕時是否可見
 例：backfaceVisibility:'visible'
 -> visible (背面是可見的)
 -> hidden  (背面是不可見的)

 "backgroundColor",背景色
 例：backgroundColor:'red'
 例：backgroundColor:'#cccccc'
 -> color   (指定背景顏色。在CSS顏色值近可能的尋找一個顏色值的完整列表)
 -> transparent (指定背景顏色應(yīng)該是透明的。這是默認)
 -> inherit (指定背景顏色，應(yīng)該從父元素繼承)

 "borderBottomColor",底部邊框顏色
 例：borderBottomColor:'red'
 例：borderBottomColor:'#cccccc'
 -> color   (指定背景顏色。在CSS 顏色值 查找顏色值的完整列表)
 -> transparent (指定邊框的顏色應(yīng)該是透明的。這是默認)
 - >inherit (指定邊框的顏色，應(yīng)該從父元素繼承)


 "borderBottomLeftRadius",左下角添加圓角邊框
 例：borderBottomLeftRadius:10

 "borderBottomRightRadius",右下角添加圓角邊框
 例：borderBottomRightRadius:10

 "borderBottomWidth",底部邊框?qū)挾? 例：borderBottomWidth:8

 "borderColor",四個邊框顏色
 例：borderColor:'#00ff00'

 "borderLeftColor",左邊框顏色
 例：borderLeftColor:'yellow'

 "borderLeftWidth",左邊框?qū)挾? 例：borderLeftWidth:10

 "borderRadius",四角圓角弧度
 例：borderRadius:15

 "borderRightColor",右邊框顏色
 例：例：borderRightColor:'yellow'

 "borderRightWidth",右邊框?qū)挾? 例：borderRightWidth:10

 "borderStyle",四個邊框的樣式
 例：borderStyle:'dotted'
 -> none    定義無邊框。
 -> hidden  與 "none" 相同。不過應(yīng)用于表時除外，對于表，hidden 用于解決邊框沖突。
 -> dotted  定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
 -> dashed  定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
 -> solid   定義實線。
 -> double  定義雙線。雙線的寬度等于 border-width 的值。
 -> groove  定義 3D 凹槽邊框。其效果取決于 border-color 的值。
 -> ridge   定義 3D 壟狀邊框。其效果取決于 border-color 的值。
 -> inset   定義 3D inset 邊框。其效果取決于 border-color 的值。
 -> outset  定義 3D outset 邊框。其效果取決于 border-color 的值。
 -> inherit 規(guī)定應(yīng)該從父元素繼承邊框樣式。

 "borderTopColor",上邊框顏色
 例：borderTopColor：'red'

 "borderTopLeftRadius",左上角圓角弧度
 例：borderTopLeftRadius：3

 "borderTopRightRadius",右上角圓角弧度
 例：borderTopRightRadius：4

 "borderTopWidth",頂部邊框?qū)挾? 例：borderTopWidth：13

 "borderWidth",四個邊框的寬度
 例：borderWidth：2

 "bottom",圖像的底部邊緣
 例：bottom:20

 "color",顏色
 例：color:'red'

 "elevation",Z軸，可產(chǎn)生立體效果
 例：elevation:1

 "flex",讓所有彈性盒模型對象的子元素都有相同的長度，忽略它們內(nèi)部的內(nèi)容
 例：flex:1

 "flexDirection",設(shè)置 <div> 元素內(nèi)彈性盒元素的方向為相反的順序
 例：flexDirection:'column'
 -> row ((默認值。靈活的項目將水平顯示，正如一個行一樣)
 -> row-reverse (與 row 相同，但是以相反的順序)
 -> column  (靈活的項目將垂直顯示，正如一個列一樣)
 -> column-reverse  (與 column 相同，但是以相反的順序)
 -> initial (設(shè)置該屬性為它的默認值。請參閱 initial)
 -> inherit (從父元素繼承該屬性。請參閱 inherit)

 "flexWrap",讓彈性盒元素在必要的時候拆行
 例：flexWrap:'wrap'
 -> nowrap  (默認值。規(guī)定靈活的項目不拆行或不拆列)
 -> wrap    (規(guī)定靈活的項目在必要的時候拆行或拆列)
 -> wrap-reverse    (規(guī)定靈活的項目在必要的時候拆行或拆列，但是以相反的順序)
 -> initial (設(shè)置該屬性為它的默認值。請參閱 initial)
 -> inherit (從父元素繼承該屬性。請參閱 inherit)

 "fontFamily",字體
 例：fontFamily:'courier'

 "fontSize",字體大小
 例：fontSize:20

 "fontStyle",
 例：fontStyle:'italic'
 -> normal  默認值。瀏覽器顯示一個標準的字體樣式。
 -> italic  瀏覽器會顯示一個斜體的字體樣式。
 -> oblique 瀏覽器會顯示一個傾斜的字體樣式

 "fontWeight",文本的粗細
 例：fontWeight:'bold'
 -> normal  (默認值。定義標準的字符)
 -> bold    (定義粗體字符)
 -> bolder  (定義更粗的字符)
 -> lighter (定義更細的字符)
 -> 100    (定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold)
 -> 200
 -> 300
 -> 400
 -> 500
 -> 600
 -> 700
 -> 800
 -> 900

 "height",設(shè)置元素的高度
 例：height:200

 "justifyContent",在彈性盒對象的元素中的各項周圍留有空白
 例：justifyContent:'space-between'
 -> flex-start  (默認值。項目位于容器的開頭)
 -> flex-end    (項目位于容器的結(jié)尾)
 -> center  (項目位于容器的中心)
 -> space-between   (項目位于各行之間留有空白的容器內(nèi))
 -> space-around    (項目位于各行之前、之間、之后都留有空白的容器內(nèi))

 "left",把圖像的左邊緣設(shè)置在其包含元素左邊緣向右5像素的位置
 例：left:20

 "letterSpacing",字母間距
 例：letterSpacing:20

 "lineHeight",行高
 例：lineHeight:30

 "margin",元素的所有四個邊距
 例：

 "marginBottom",下邊距
 例：marginBottom:50

 "marginHorizontal",水平間距，即左邊距和右邊距
 例：marginHorizontal:10

 "marginLeft",左邊距
 例：marginLeft:50

 "marginRight",右邊距
 例：marginRight:50

 "marginTop",上邊距
 例：marginTop:50

 "marginVertical",垂直間距，即上邊距和下邊距
 例：marginVertical:10

 "opacity",透明度級別
 例：opacity：0.5

 "overflow",設(shè)置overflow屬性進行滾動
 例：overflow:'hidden'
 visible    (默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外)
 hidden (內(nèi)容會被修剪，并且其余內(nèi)容是不可見的)
 scroll (內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容)

 "overlayColor",
 例：

 "padding",填充
 例：

 "paddingBottom",下填充
 例：

 "paddingHorizontal",左右填充
 例：

 "paddingLeft",左填充
 例：

 "paddingRight",右填充
 例：

 "paddingTop",上填充
 例：

 "paddingVertical",上下填充
 例：

 "position",定位
 例：position:'fixed'
 -> absolute    生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
 -> fixed       生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
 -> relative    生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
 -> static      默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）

 "resizeMode",用戶調(diào)整大小
 例：resizeMode:'cover'
 -> cover    等比拉伸
 -> strech   保持原有大小
 -> contain  圖片拉伸  充滿空間

 "right",把圖像的右邊緣設(shè)置在其包含元素右邊緣向左 5 像素的位置
 例：right:5

 "rotation",元素旋轉(zhuǎn)
 例：rotation：180

 "scaleX",
 例：

 "scaleY",
 例：

 "shadowColor",
 例：

 "shadowOffset",
 例：

 "shadowOpacity",
 例：

 "shadowRadius",
 例：

 "textAlign",文本對齊方式
 例：textAlign:'left'
 -> left    把文本排列到左邊。默認值：由瀏覽器決定。
 -> right   把文本排列到右邊。
 -> center  把文本排列到中間。
 -> justify 實現(xiàn)兩端對齊文本效果

 "textAlignVertical",
 例：

 "textDecorationColor",下劃線文本中下劃線的顏色
 例：textDecorationColor:'red'

 "textDecorationLine",顯示一條線
 例：textDecorationLine:'underline'
 -> none            默認值。規(guī)定文本修飾沒有線條。 測試 ?
 -> underline       規(guī)定文本的下方將顯示一條線。  測試 ?
 -> overline        規(guī)定文本的上方將顯示一條線。  測試 ?
 -> line-through    規(guī)定文本的中間將顯示一條線

 "textDecorationStyle",顯示一條線的樣式
 例：textDecorationStyle:'solid'
 -> solid   默認值。線條將顯示為單線。
 -> double  線條將顯示為雙線。
 -> dotted  線條將顯示為點狀線。
 -> dashed  線條將顯示為虛線。
 -> wavy    線條將顯示為波浪線

 "textShadowColor",文字陰影顏色
 例：textShadowColor：'red'

 "textShadowOffset",文字陰影偏移量
 例：textShadowOffset:2

 "textShadowRadius",文字陰影圓角
 例：textShadowRadius:3

 "tintColor",
 例：

 "top",上
 例：

 "transform",旋轉(zhuǎn)
 例：
 none   定義不進行轉(zhuǎn)換。
 matrix(n,n,n,n,n,n)    定義 2D 轉(zhuǎn)換，使用六個值的矩陣。
 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)  定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。
 translate(x,y) 定義 2D 轉(zhuǎn)換。
 translate3d(x,y,z) 定義 3D 轉(zhuǎn)換。
 translateX(x)  定義轉(zhuǎn)換，只是用 X 軸的值。
 translateY(y)  定義轉(zhuǎn)換，只是用 Y 軸的值。
 translateZ(z)  定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。
 scale(x[,y]?)  定義 2D 縮放轉(zhuǎn)換。
 scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。
 scaleX(x)  通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。
 scaleY(y)  通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
 scaleZ(z)  通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換。
 rotate(angle)  定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
 rotate3d(x,y,z,angle)  定義 3D 旋轉(zhuǎn)。
 rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。    測試
 rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
 rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
 skew(x-angle,y-angle)  定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。
 skewX(angle)   定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
 skewY(angle)   定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。
 perspective(n) 為 3D 轉(zhuǎn)換元素定義透視視圖

 "translateX",
 例：

 "translateY",
 例：

 "width",款
 例：

 "writingDirection"文本方向
  auto’,’ltr’,’rtl

 *
* */


AppRegistry.registerComponent('test' ,() => test);//第一個test是項目名字，后面的test是當(dāng)前方法的名字（需要運行的方法）