Text - 《Taro 文档帮助手册教程》

sidebar_label: Text
类型
示例代码
TextProps
- API 支持度
- TSpace

title: Text

sidebar_label: Text

文本

支持情况： Text - 图1 Text - 图2 Text - 图3 Text - 图4 Text - 图5 Text - 图6

参考文档

类型

ComponentType<TextProps>

示例代码

import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’

tsx
export default class PageView extends Component {
  state = {
    contents: [],
    contentsLen: 0
  }

  add = () => {
    this.setState(prev => {
      const cot = prev.contents.slice()
      cot.push({ text: 'hello world' })
      return {
        contents: cot,
        contentsLen: cot.length
      }
    })
  }

  remove = () => {
    this.setState(prev => {
      const cot = prev.contents.slice()
      cot.pop()
      return {
        contents: cot,
        contentsLen: cot.length
      }
    })
  }

  render () {
    return (
      <View className='container'>
        {this.state.contents.map((item, index) => (
          <Text key={index}>{item.text}</Text>
        ))}
        <Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
        <Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
      </View>
    )
  }
}

html
<template>
  <view class="container">
    <view v-for="(item, index) in contents">
      <text>{{item.text}} line {{index + 1}}</text>
    </view>
    <button class="btn-max-w button_style" :plain="true" type="default" @tap="add">add line</button>
    <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" @tap="remove">remove line</button>
</template>

<script>
export default {
  data() {
    return {
      contents: [],
      contentsLen: 0
    }
  },
  methods: {
    add () {
      const cot = this.contents.slice()
      cot.push({ text: 'hello world' })
      this.contents = cot
      this.contentsLen = cot.length
    },

    remove () {
      const cot = this.contents.slice()
      cot.pop()
      this.contents = cot
      this.contentsLen = cot.length
    }
  }
}
</script>

TextProps

参数	类型	默认值	必填	说明
selectable	`boolean`	`false`	否	文本是否可选
userSelect	`boolean`	`false`	否	文本是否可选，该属性会使文本节点显示为 inline-block
space	`keyof TSpace`		否	显示连续空格
decode	`boolean`	`false`	否	是否解码

API 支持度

API	微信小程序	百度小程序	支付宝小程序	字节跳动小程序	H5	React Native
TextProps.selectable	✔️	✔️	✔️	✔️	✔️	✔️
TextProps.userSelect	✔️
TextProps.space	✔️	✔️		✔️
TextProps.decode	✔️			✔️

TSpace

space 的合法值

参数	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小