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

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

//使用控件時(shí)必須導(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里面必須返回一個(gè)組件,只能是一個(gè)組件，多個(gè)用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)然也可以自定義袜香，因?yàn)楸镜貓D片確定了圖片的size
          * */

          //使用自定義控件時(shí)撕予，只給它的屬性賦值即可

          <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+字符串'蜈首，所以可以自定義一個(gè)view自帶hello实抡，填入后面的字符串即可
class Greetings extends Component {
  render(){

    return(

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

    );

  }
}

//自定義控件，聲明兩個(gè)屬性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>
    );


  }


}

//自定義樣式吆寨，里面可以指定多個(gè)樣式，使用時(shí) 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",居中對(duì)齊彈性盒的各項(xiàng) <div> 元素
 例：alignItems:'center',
 -> stretch(項(xiàng)目被拉伸以適應(yīng)容器)
 -> center(項(xiàng)目位于容器的中心)
 -> flex-start(項(xiàng)目位于容器的開頭)
 -> flex-end(項(xiàng)目位于容器的結(jié)尾)
 -> baseline(項(xiàng)目位于容器的基線上)
 -> initial(設(shè)置該屬性為它的默認(rèn)值)
 -> inherit(從父元素繼承該屬性)

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

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

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

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


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

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

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

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

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

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

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

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

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

 "borderStyle",四個(gè)邊框的樣式
 例：borderStyle:'dotted'
 -> none    定義無邊框胯盯。
 -> hidden  與 "none" 相同懈费。不過應(yīng)用于表時(shí)除外，對(duì)于表博脑，hidden 用于解決邊框沖突憎乙。
 -> dotted  定義點(diǎn)狀邊框票罐。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
 -> dashed  定義虛線泞边。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線该押。
 -> solid   定義實(shí)線。
 -> 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",四個(gè)邊框的寬度
 例：borderWidth：2

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

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

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

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

 "flexDirection",設(shè)置 <div> 元素內(nèi)彈性盒元素的方向?yàn)橄喾吹捻樞? 例：flexDirection:'column'
 -> row ((默認(rèn)值宵距。靈活的項(xiàng)目將水平顯示，正如一個(gè)行一樣)
 -> row-reverse (與 row 相同吨拗，但是以相反的順序)
 -> column  (靈活的項(xiàng)目將垂直顯示消玄，正如一個(gè)列一樣)
 -> column-reverse  (與 column 相同，但是以相反的順序)
 -> initial (設(shè)置該屬性為它的默認(rèn)值丢胚。請(qǐng)參閱 initial)
 -> inherit (從父元素繼承該屬性翩瓜。請(qǐng)參閱 inherit)

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

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

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

 "fontStyle",
 例：fontStyle:'italic'
 -> normal  默認(rèn)值龄减。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式璃氢。
 -> italic  瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。
 -> oblique 瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式

 "fontWeight",文本的粗細(xì)
 例：fontWeight:'bold'
 -> normal  (默認(rèn)值蕊蝗。定義標(biāo)準(zhǔn)的字符)
 -> bold    (定義粗體字符)
 -> bolder  (定義更粗的字符)
 -> lighter (定義更細(xì)的字符)
 -> 100    (定義由粗到細(xì)的字符仅乓。400 等同于 normal，而 700 等同于 bold)
 -> 200
 -> 300
 -> 400
 -> 500
 -> 600
 -> 700
 -> 800
 -> 900

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

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

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

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

 "lineHeight",行高
 例：lineHeight:30

 "margin",元素的所有四個(gè)邊距
 例：

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

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

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

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

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

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

 "opacity",透明度級(jí)別
 例：opacity：0.5

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

 "overlayColor",
 例：

 "padding",填充
 例：

 "paddingBottom",下填充
 例：

 "paddingHorizontal",左右填充
 例：

 "paddingLeft",左填充
 例：

 "paddingRight",右填充
 例：

 "paddingTop",上填充
 例：

 "paddingVertical",上下填充
 例：

 "position",定位
 例：position:'fixed'
 -> absolute    生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位孵班。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定涉兽。
 -> fixed       生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位篙程。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定花椭。
 -> relative    生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位房午。因此矿辽，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
 -> static      默認(rèn)值郭厌。沒有定位袋倔，元素出現(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",文本對(duì)齊方式
 例：textAlign:'left'
 -> left    把文本排列到左邊。默認(rèn)值：由瀏覽器決定折柠。
 -> right   把文本排列到右邊宾娜。
 -> center  把文本排列到中間。
 -> justify 實(shí)現(xiàn)兩端對(duì)齊文本效果

 "textAlignVertical",
 例：

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

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

 "textDecorationStyle",顯示一條線的樣式
 例：textDecorationStyle:'solid'
 -> solid   默認(rèn)值华弓。線條將顯示為單線。
 -> double  線條將顯示為雙線困乒。
 -> dotted  線條將顯示為點(diǎn)狀線寂屏。
 -> dashed  線條將顯示為虛線。
 -> wavy    線條將顯示為波浪線

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

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

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

 "tintColor",
 例：

 "top",上
 例：

 "transform",旋轉(zhuǎn)
 例：
 none   定義不進(jìn)行轉(zhuǎn)換娜搂。
 matrix(n,n,n,n,n,n)    定義 2D 轉(zhuǎn)換迁霎，使用六個(gè)值的矩陣。
 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)  定義 3D 轉(zhuǎn)換百宇，使用 16 個(gè)值的 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)盹廷。    測(cè)試
 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);//第一個(gè)test是項(xiàng)目名字缸榄，后面的test是當(dāng)前方法的名字（需要運(yùn)行的方法）