侧边栏壁纸
  • 累计撰写 121 篇文章
  • 累计创建 0 个标签
  • 累计收到 51 条评论

目 录CONTENT

文章目录

06-ReactNative文本组件Text.md

江子辰
2022-03-20 / 0 评论 / 0 点赞 / 258 阅读 / 2,389 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-31,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

React Native 文本组件 Text

在 React Native 中如果要显示一段文本,可以使用 React Native 内置的文本组件 ``。

文本组件 Text 只能用来显示文本,如果要显示网页,可以使用网页组件 WebView

虽然文本组件可能将部分文本显示为电话号码或者网址等可以点击的样子,但毕竟有限。没有 WebView 来的强大。

React Native 文本组件 Text

引入组件

使用文本组件 Text 之前先要引入它

import { Text } from 'react-native';

使用语法

<Text
   color="#333333"
   lineHeight="12"
   fontSize="12" >简单教程</Text>

属性说明

属性类型是否必填说明
selectableboolfalse是否可选中,true 为真,false 为否
numberOfLinesnumberfalse用于在计算文本布局(包括换行)后使用省略号截断文本,使得总行数不超过此数字
ellipsizeModestringfalse如果设置了 numberOfLines,那么该属性用于设置文本如何被截断
dataDetectorTypestringfalse用于设置如何转换文本中的某些子文本
colorcolor用于设置文本的颜色
fontFamilystring用于设置文本的字体
fontSizenumber用于设置文字的大小
fontStylestring用于设置文字是否倾斜,normal 正常,italic 倾斜,默认为 normal
fontWeightstring文字的粗细,可以设置的值有: 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'
lineHeightnumber用于设置文本的行高
textAlignstring用于设置文本的对其方式,可选的值有 'auto', 'left', 'right', 'center', 'justify'。Android 下只有 left 即使设置了其它值扔就是 left
textDecorationLinestring用于设置文本的下划线类型,可选的值有 'none', 'underline', 'line-through', 'underline line-through'
textShadowColorcolor用于设置文本的阴影色
textShadowOffsetobject用于设置阴影的偏移量,格式为 {width: number,height: number}
textShadowRadiusnumber用于设置阴影的圆角度。
letterSpacingnumber用于设置字与字之间的距离
textTransformstring用于设置文本转换格式,可选的值有 'none', 'uppercase', 'lowercase', 'capitalize'

组件嵌套

文本组件 `` 可以嵌套另一个组件,被嵌套的组件会继承父级的文本组件的样式和属性。

<Text
   color="#333333"
   lineHeight="12"
   fontSize="12" >简单教程
      <Text
         fontSize="11"
         >简单编程</Text>
</Text>

范例

下面的代码,我们演示了 React Native 文本组件的用法,也演示了文本组件的嵌套语法。

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'

const App = () => {
   return (
      <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               简
            </Text>

            <Text>
               单教程
            </Text>

            <Text>
               简单<Text style = {styles.wordBold}>编程</Text> 简单教程致力于简化 IT 技术的学习难度为使命,
            </Text>

            <Text style = {styles.italicText}>通过整合市面上的教程,然后挑选,去除难以理解的部分
            </Text>

            <Text style = {styles.textShadow}>
               简单教程竟不是孤立存在的,它的成长离不开广大战友们的支持。
            </Text>
         </Text>
      </View>
   )
}
export default App

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
      marginTop: 100,
      padding: 20
   },
   text: {
      color: '#41cdf4',
   },
   capitalLetter: {
      color: 'red',
      fontSize: 20
   },
   wordBold: {
      fontWeight: 'bold',
      color: 'black'
   },
   italicText: {
      color: '#37859b',
      fontStyle: 'italic'
   },
   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

演示效果如下

React Native Text 文本组件

0
广告 广告

评论区