Reactive Native笔记

根据小码哥的教程整理。
所有的变量全部用{}

一、常用组建之View

Reactive Native中的组件view，相当于iOS中的UIView,Android中的android.view
在Reactive Native开发中，使用StyleSheet来进行组件的布局。

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,　//占满整个屏幕    
    //justifyContent:'center',    
    //alignItems: 'center',    
    backgroundColor:'red',    
    width :300,    height : 60  
  },  
  innerStyle:{    
    backgroundColor:'yellow'  
  }
});

➤在render函数中，我们返回了一个顶层的View，然后View中包含着另一个字层的View。
在顶层的View中style属性里面设置了宽带300，高度60，背景颜色为红色；
对应子层中的View的style属性中设置了背景色为黄色。
显示效果如下

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

view的常用属性↓

• 那么我们怎么能让他们显示在一行呢？

就用到了Flexbox↓

二、 FlexBox布局

FelxBox:能够伸缩或者很容易变化，以适应外界条件的变化
box：通用的矩形容器
FlexBox布局？：弹性盒模型，又叫Flexbox,意为“弹性布局”，旨在通过弹性的方式来，，巴拉巴拉吧拉，，，，，，

• FlexBox的常用属性：
  ➢flexDirection:'row|row-reverse|column| column-reverse'
  该属性决定主轴的方向（即项目排列的方向，所以上边的
  例子，因为他的主轴的方向是x轴正向，所以才会竖着排下来了）
  row:主轴为水平方向，起点在左端
  row-reverse:主轴为水平方向，起点在右端
  column:主轴为垂直方向，起点在上沿
  column-reverse:主轴为垂直方向，起点在下沿

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

代码就像下面这样↓，哈哈，为什么没有老师的那个效果呢😏，哈哈哈，因为老师设置的高都是一样的

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,　//占满整个屏幕    
    //justifyContent:'center',    
    //alignItems: 'center',   
    backgroundColor:'red',    
    width :300,    
    height : 80,   
    //改变主轴方向，默认是竖向    
    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'   文本对其方式("auto", 'left', 'right', 'center', 'justify')
'lineHeight'  行高
'fontSize'  字体大小
'fontWeight ' 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500',     '600', '700', '800', '900')
'letterSpacing'  字符间距
'textDecorationLine'  横线位置 ("none", 'underline', 'line-through', 'underline line-through')
'textDecorationStyle' 线的风格("solid", 'double', 'dotted', 'dashed')
'textDecorationColor' 线的颜色
'numberOfLines' (number) 进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了
'onPress' (fcuntion)  该方法当文本发生点击的时候调用该方法
'fontFamily'  字体名称
'fontStyle'   字体风格(normal,italic)
'textShadowOffset'  设置阴影效果{width: number, height: number}
'textShadowRadius'  阴影效果圆角
'textShadowColor'  阴影效果的颜色
'writingDirection' 文本方向("auto", 'ltr', 'rtl')