根據(jù)小碼哥的教程整理。
所有的變量全部用{}

一、常用組建之View

Reactive Native中的組件view，相當(dāng)于iOS中的UIView,Android中的android.view
在Reactive Native開(kāi)發(fā)中，使用StyleSheet來(lái)進(jìn)行組件的布局。

class BView extends Component {  
  render() {    
    return (       
     <View style={styles.container}>          
        <Text>我是頂層view</Text>          
          <View style = {styles.innerStyle}>            
              <Text>我是子層view</Text>          
          </View>        
      </View>    
    );  
  }
}


const styles = StyleSheet.create({  
  container:{    
    //flex: 1,　//占滿整個(gè)屏幕    
    //justifyContent:'center',    
    //alignItems: 'center',    
    backgroundColor:'red',    
    width :300,    height : 60  
  },  
  innerStyle:{    
    backgroundColor:'yellow'  
  }
});

?在render函數(shù)中，我們返回了一個(gè)頂層的View，然后View中包含著另一個(gè)字層的View。
在頂層的View中style屬性里面設(shè)置了寬帶300，高度60，背景顏色為紅色；
對(duì)應(yīng)子層中的View的style屬性中設(shè)置了背景色為黃色。
顯示效果如下

屏幕快照 2016-08-06 17.25.44.png

view的常用屬性↓

• 那么我們?cè)趺茨茏屗麄冿@示在一行呢？

就用到了Flexbox↓

二、 FlexBox布局

FelxBox:能夠伸縮或者很容易變化，以適應(yīng)外界條件的變化
box：通用的矩形容器
FlexBox布局？：彈性盒模型，又叫Flexbox,意為“彈性布局”，旨在通過(guò)彈性的方式來(lái)，，巴拉巴拉吧拉，，，，，，

• FlexBox的常用屬性：
  ?flexDirection:'row|row-reverse|column| column-reverse'
  該屬性決定主軸的方向（即項(xiàng)目排列的方向，所以上邊的
  例子，因?yàn)樗闹鬏S的方向是x軸正向，所以才會(huì)豎著排下來(lái)了）
  row:主軸為水平方向，起點(diǎn)在左端
  row-reverse:主軸為水平方向，起點(diǎn)在右端
  column:主軸為垂直方向，起點(diǎn)在上沿
  column-reverse:主軸為垂直方向，起點(diǎn)在下沿

328E870B-7968-4385-8557-2AC77E2D7C65.png

代碼就像下面這樣↓，哈哈，為什么沒(méi)有老師的那個(gè)效果呢??，哈哈哈，因?yàn)槔蠋熢O(shè)置的高都是一樣的

class BView extends Component {  
  render() {    
     return (        
         <View style={styles.container}>         
         {/*<Text>我是頂層view</Text>*/}          
            <View style = {styles.innerStyle}>            
                 <Text>我是子層view</Text>          
             </View>          
             <View style = {styles.inner2Style}>            
                 <Text>我是子層2view</Text>       
             </View>       
         </View>  
      ); 
    }
  }

const styles = StyleSheet.create({  
    container:{    
    //flex: 1,　//占滿整個(gè)屏幕    
    //justifyContent:'center',    
    //alignItems: 'center',   
    backgroundColor:'red',    
    width :300,    
    height : 80,   
    //改變主軸方向，默認(rèn)是豎向    
    flexDirection:'row'  
  },
  innerStyle:{    
    backgroundColor:'yellow',   
    width:150,   
    height:20 
   },
  inner2Style:{   
    backgroundColor:'darkgray',   
    width:100,    
   height:20  
  }
});

效果圖如下↓

屏幕快照 2016-08-06 18.19.54.png

?justifyContent:flex-end | space-around|
justifyContent:'center'↓

屏幕快照 2016-08-07 20.48.59.png

?justifyContent:'space-between'↓

屏幕快照 2016-08-07 20.50.59.png

?justifyContent:'space-around'↓

屏幕快照 2016-08-07 20.52.09.png

三、常用組建之Text

class TextDemo extends Component {
    render() {
        return {
            <View style={{marginTop:50}}>
                <Text style={styles.textStyle} numberOfLines = {5}>
                  我是一段文字
                 </Text>
            </View>
       };
    }
}


const styles = StyleSheet.create({
    textStyle:{
        backgroundColor:'red',
        color:'yellow',
        textAlign:'right',
        width:300,
        lineHeight:'right'
        fontSize: 18
        fontWeight:'bold'
        letterSracing: 5
        textDecorationLine: 'underline'
        textDecorationStyle: 'double'
        textDecorationColor: 'black'
    }
});


注釋如下：
'color'字體顏色
'textAlign'   文本對(duì)其方式("auto", 'left', 'right', 'center', 'justify')
'lineHeight'  行高
'fontSize'  字體大小
'fontWeight ' 字體粗細(xì)權(quán)重("normal", 'bold', '100', '200', '300', '400', '500',     '600', '700', '800', '900')
'letterSpacing'  字符間距
'textDecorationLine'  橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
'textDecorationStyle' 線的風(fēng)格("solid", 'double', 'dotted', 'dashed')
'textDecorationColor' 線的顏色
'numberOfLines' (number) 進(jìn)行設(shè)置Text顯示文本的行數(shù)，如果顯示的內(nèi)容超過(guò)了行數(shù)，默認(rèn)其他多余的信息就不會(huì)顯示了
'onPress' (fcuntion)  該方法當(dāng)文本發(fā)生點(diǎn)擊的時(shí)候調(diào)用該方法
'fontFamily'  字體名稱(chēng)
'fontStyle'   字體風(fēng)格(normal,italic)
'textShadowOffset'  設(shè)置陰影效果{width: number, height: number}
'textShadowRadius'  陰影效果圓角
'textShadowColor'  陰影效果的顏色
'writingDirection' 文本方向("auto", 'ltr', 'rtl')