360SDN.COM

【React Native开发】React Native控件之Text组件讲解(9)

来源:  2017-06-18 17:04:26    评论:0点击:

 

转载请标明出处:

http://blog.csdn.net/developer_jiangqq/article/details/50550518

本文出自:【江清清的博客】


()前言

         【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 

       今天我们一起来看一下Text控件的具体介绍和使用方法,具体环境搭建以及相关配置的请查看之前的相关文章。

        刚创建的React Native技术交流3群(496508742),react Native技术交流4群(458982758),请不要重复加群!欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

()基本介绍

         Text组件为React中一个基本组件,该和Android中的TextView组件相类似用来显示基本的文本信息,该控件除了基本的显示布局之外,可以进行嵌套显示,设置样式,以及可以做事件(例如:点击)处理。下面我们来一个实例:    /**
     * 进行简单Text组件使用实例
     * Sample React Native App  test.android.js
     * https://github.com/facebook/react-native
     */  
    'use strict';  
    var React =require('react-native');  
    var {  
      AppRegistry,  
      Text,  
      StyleSheet,  
    } = React;  
       
    var styles =StyleSheet.create({  
         titleBase:{  
            margin:10,  
            textAlign:'center',  
            color:'red',  
            fontSize:28,  
            fontFamily:'Cochin',  
         },  
         title:{  
            color:'green',  
            fontWeight:'bold',  
         },  
    });  
    var TestText =React.createClass({  
      render: function() {  
        return (  
          <Text style={styles.titleBase}>  
             I am root text!  
             <Text style={styles.title}>  
                  I am chid text!  
              </Text>  
          </Text>  
        );  
      }  
    });  
    AppRegistry.registerComponent('TestText',() => TestText);

具体运行效果如下:

 

上述实例采用TextView的嵌套方式,最外层的Text的Style titleBase定义相关风格,内层的风格style定义相关风格,我们可以看到运行效果,如果内层没有重写外层定义的样式,那么内层会进行继承。如果重写了样式,那么内层会根据自己定义的样式进行渲染,该和CSS样式表差不多。

上面例子主要定义了布局,字体大小,字体风格,颜色等相关样式,下面我们会着重进行讲解。

()属性方法(主要一些可用的属性)

      .allowFontScaling (bool):控制字体是否根据iOS的设置进行自动缩放-ios平台,android平台不适用

      .numberOfLines (number):进行设置Text显示文本的行数,如果显示的内容超过了行数,默认其他多余的信息就不会显示了。

     .onLayout (function) 当布局位置发生变动的时候自动进行触发该方法, 其中该function的参数如下:

 
 
  1. {nativeEvent: {layout: {x, y, width, height}}}  

     .onPress (fcuntion) 该方法当文本发生点击的时候调用该方法.

()风格样式

      1..承可以使View组件所有Style(具体查看http://facebook.github.io/react-native/docs/view.html#style)

      2.color:体颜色                                

      3..fontFamily 字体名称

      4..fontSize  字体大小

      5..fontStyle   字体风格(normal,italic)

      6..fontWeight  字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500','600', '700', '800', '900')

      7..textShadowOffset 设置阴影效果{width: number, height: number}

      8..textShadowRadius 阴影效果圆角       9..textShadowColor 阴影效果的颜色

      10.letterSpacing 字符间距            11.lineHeight行高

      12.textAlign   文本对其方式("auto",'left', 'right', 'center', 'justify')

      13.textDecorationLine  横线位置 ("none", 'underline', 'line-through', 'underlineline-through')

      14.textDecorationStyle  线的风格("solid", 'double', 'dotted','dashed')

      15.textDecorationColor  线的颜色      16.writingDirection  文本方向("auto", 'ltr','rtl')

()特别注意点

        5.1.嵌套特点:Web上面一直的设计方案,我们通过嵌套包裹的方案,相同的属性的文本可以用父标签进行包裹,然后内部特殊的文本采用子标签方案,具体例子如下:  

    <Text style={{fontWeight:'bold',fontSize:28}}>  
                 I am bold  
                <Text style={{color: 'red'}}>  
                   and red  
               </Text>  
          </Text>

具体运行效果如下:

 

我们看到整体字体格式为bold以及字体大小为28,不过后边的'and red'的字体颜色为红色。

 5.2.容器布局规则

        之前我们介绍View组件,我们知道该组件是支持FlexBox(弹性布局),但是Text组件直接是文本布局的,也就是说一个Text接着Text,横向,如果文本已经到末尾了,那就直接换行。

我们来看一下具体实例代码
   <View>  

           <Text>First part and </Text>  
           <Text>second part</Text>  
    </View>

运行截图如下:

 

这样我们可以看到两个Text直接横向排布,第二个Text直接接在第一个Text后面了。但是如果该父控件采用View,View是支持FlexBox布局的,具体看如下实例代码:

    <Text>  
               <Text>One Test </Text>  
               <Text>Second Test</Text>  
           </Text>

默认垂直分布,运行结果如下:

 

 5.3.样式继承规格

        从以上一些例子中我们也发现了,组件可以嵌套,而且样式还支持继承,也就说父组件定义了相关样式,如果子组件没有重写样式的话,那么该子组件会继承父组件定义的样式。

()Text实例

       下面使用以上一些属性和相关样式来演示一下实例:    /**
     *  Text组件实例演示
     * Sample React Native App
     * https://github.com/facebook/react-native
     */  
    'use strict';  
    var React =require('react-native');  
    var {  
      AppRegistry,  
      Text,  
      View,  
      StyleSheet,  
    } = React;  
    var TestText =React.createClass({  
      render: function() {  
        return (  
          <View>  
           <Text style={{color:'red'}}>  
              My Text One  红色。  
           </Text>  
           <Textstyle={{color:'green',fontSize:20}}> My Text Two 绿色和字体大小。</Text>  
           <Textstyle={{color:'green',fontFamily:'Cochin'}}> My Text Three 绿色和字体名称。</Text>  
           <Textstyle={{color:'pink',fontWeight:'bold'}}> My Text Four 粉色和加粗。</Text>  
           <Textstyle={{color:'gray',fontStyle:'italic'}}> My Text Five 灰色和斜体。</Text>  
           <Textstyle={{textAlign:'center',fontStyle:'italic'}}> My Text Six 居中和斜体。</Text>  
           <TextnumberOfLines={1} style={{textAlign:'center',fontStyle:'italic'}}>测试行数My Text Six 居中和斜体。My Text Six 居中和斜体。 My Text Six 居中和斜体。</Text>  
           <Textstyle={{marginLeft:50,marginTop:50,textAlign:'center',fontStyle:'italic'}}>设置文本的间距,居左,居顶部50</Text>  
           <Text numberOfLines={2}style={{lineHeight:50,textAlign:'center',fontStyle:'italic'}}>  
              测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高  
              测试行高 测试行高 测试行高 测试行高 测试行高 测试行高  
           </Text>  
          </View>  
        );  
      }  
    });  
    AppRegistry.registerComponent('TestText',() => TestText);

具体运行截图如下:

()最后总结

          今天我们主要给大家介绍Text组件的相关属性和样式的基本使用方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

         尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

       关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权