Skip to main content
Version: 3.x

Text

Text.

Reference

Type

ComponentType<TextProps>

Examples

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>
)
}
}

TextProps

PropertyTypeDefaultRequiredDescription
selectablebooleanfalseNoSpecifies whether the text is selectable
space"ensp" | "emsp" | "nbsp"NoDisplays consecutive spaces
decodebooleanfalseNoSpecifies whether to decode component

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
TextProps.selectable✔️✔️✔️✔️✔️✔️
TextProps.space✔️✔️✔️
TextProps.decode✔️✔️

TSpace

Valid values of space

ValueDescription
enspEn space
emspEm space
nbspThe size of the space is set according to the font setting

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Text✔️✔️✔️✔️✔️✔️