Reactive Native笔记

作者: CaesarsTesla | 来源:发表于2016-07-27 15:31 被阅读1408次

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

    一、常用组建之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')

    相关文章

      网友评论

        本文标题:Reactive Native笔记

        本文链接:https://www.haomeiwen.com/subject/lusmjttx.html