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>

属性说明

组件嵌套

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

<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}>
               B
            </Text>
            <Text>
               UCT
            </Text>
            <Text>
               BU<Text style = {styles.wordBold}>编程</Text> 怎样学习全英文课程
            </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
   }
})