一、什么是Text组件?

一个用于显示文本的React组件,和Android中的TextView组件或者OC中的Label组件相类似,专门用来显示基本的文本信息;除了基本的显示布局之外,可以进行嵌套显示,设置样式,以及可以做事件(例如:点击)处理;

二、Text组件常用的属性方法

Attributes.style = {
    color string
    containerBackgroundColor string
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center')
    writingDirection enum("auto", 'ltr', 'rtl')
   numberOfLines number
   textAlign (
"auto", 'left', 'right', 'center', 'justify')
   fontWeight (
"normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')    onPress  fcuntion
}

注释如下:

`color` 字体颜色

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

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

`color`  字体颜色

`fontFamily`  字体名称

`fontSize`  字体大小

`fontStyle`   字体风格(normal,italic)

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

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

`textShadowRadius`  阴影效果圆角

`textShadowColor`  阴影效果的颜色

`letterSpacing`  字符间距

`lineHeight`  行高

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

`textDecorationLine`  横线位置 ("none", 'underline', 'line-through', 'underline line-through')

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

`textDecorationColor` 线的颜色

`writingDirection` 文本方向("auto", 'ltr', 'rtl')

三、Text组件中常用属性的应用

运行结果如下:

三、Text组件中样式的继承

在React-native中是没有样式继承这种说法的, 但是对于Text元素里边的Text元素,其实是能够继承的,那么是单层继承还是多层继承?

代码演示:

运行结果:

结论:文字控制类的属性也是多重继承的,和css中是一样的

一起来点React Native——常用组件之Text的更多相关文章

  1. React Native常用组件在Android和IOS上的不同

    React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...

  2. react native 常用组件汇总

    react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...

  3. React Native常用组件之ListView

    1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...

  4. React Native常用组件之ScrollView

    1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...

  5. 一起来点React Native——常用组件之Touchable系列

    在前面的登录界面中,我们发现所有的组件不会对用户的点击.触摸.拖拽做出合适的响应,这是十分不友好的.那么,在React Native中如何让视图对触发做出合适的响应呢? 一.高亮触摸  Touchab ...

  6. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  7. React Native常用组件之ListView组件

    学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵 ...

  8. React Native常用组件之ScrollView组件

    一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...

  9. React Native常用组件Image使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

随机推荐

  1. hdu 5666 Segment 俄罗斯乘法或者套大数板子

    Segment Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem ...

  2. hdu 3183 A Magic Lamp rmq或者暴力

    A Magic Lamp Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Pro ...

  3. java 从List中随机取出一个元素

    java 从List中随机取出一个元素 List<Integer> list = new ArrayList<>(); Random random = new Random() ...

  4. shell 杀掉指定进程的服务

    check_results=`ps -ef|grep bp_driver.launch|awk '{print $2}'|sed -n 1p` echo `kill - $check_results` ...

  5. (转)C#制作一个消息拦截器

    首先,我们先要制作一个自定义Attribute,让他可以具有上下文读取功能,所以我们这个Attribute类要同时继承Attribute和IContextAttribute. 接口IContextAt ...

  6. Shiny+SQLite打造轻量级网页应用

    参考: R语言核心技能:交互式展示Shiny  中文 R语言用Shiny包快速搭建交互网页应用  R七种武器之交互化展示包shiny 用R的shiny包写一个基因的ID转换小程序 https://gi ...

  7. UVA557 汉堡 Burger

    题面 https://www.luogu.org/problemnew/show/UVA557 这里顺便整理一下二维格点随机游走问题. 遇到这种问题时,需注意分母的计算问题. 设x为起点到终点的距离. ...

  8. thinkphp3.2 jquery ajax巧妙使用

    1.做帐号管理的时候,我们去除一些重复的帐号是有必要的. 我使用的是jquery ajax 来和控制器进行传值.当我们跳转到我们要验证方法返回结果的时候,我们就可以使用php里的一个 0 为false ...

  9. 秒杀多线程第三篇 原子操作 Interlocked系列函数

    上一篇<多线程第一次亲密接触 CreateThread与_beginthreadex本质区别>中讲到一个多线程报数功能.为了描述方便和代码简洁起见,我们可以只输出最后的报数结果来观察程序是 ...

  10. 区别@ControllerAdvice 和@RestControllerAdvice

    @ControllerAdvice和@RestControllerAdvice都可以指向控制器的一个子集: // 指向所有带有注解@RestController的控制器 @ControllerAdvi ...