【Kevin Learn React Native】--＞ Text 组件

Text 组件对应于 Android 平台的 TextView ，用来显示文本。无论做什么应用几乎都要使用它，可以说是应用最频繁的组件之一。

1. Style

1.1 字体相关

实例代码：

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style = {styles.textStyle1}>React Native</Text>
        <Text style = {styles.textStyle2}>React Native</Text>
        <Text style = {styles.textStyle3}>React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  textStyle1: {
    fontFamily: 'monospace',
    fontSize: 20,
    fontStyle: 'normal',
    fontWeight: '900'
  },
  textStyle2: {
    fontFamily: 'serif',
    fontSize: 20,
    fontStyle: 'normal',
    fontWeight: '900'
  },
  textStyle3: {
    fontFamily: 'serif',
    fontSize: 20,
    fontStyle: 'italic',
    fontWeight: '300'
  },
  
});

效果图：

1.2 阴影相关

实例代码：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  textStyle1: {
    fontSize: 20,
    textShadowColor: 'blue',
    textShadowOffset: {width: 5, height: 5},
    textShadowRadius: 1
  },
  textStyle2: {
    fontSize: 20,
    textShadowColor: 'blue',
    textShadowOffset: {width: 5, height: 5},
    textShadowRadius: 5

  },
  textStyle3: {
    fontSize: 20,
    textShadowColor: 'blue',
    textShadowOffset: {width: 2, height: 2},
    textShadowRadius: 5
  },
  
});

效果图：

1.3 平台独有的

1.4 其它

2. 属性

还有一些属性这里没有提到，比如方便失能人士使用手机而提供的相关属性等等，具体的属性请查看​​官方文档​​。

实例代码：

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.title_view}>
         <Text style={styles.title_text}>
               Text&View 
         </Text>
        </View>
        <View style={styles.source_view}>
        <Text style={styles.source_text}>
               电讯报
         </Text>
         <Text style={styles.source_text}>
               语音播报
         </Text>
        </View>
         <Text style={styles.content_title_text}>
               穆帅专访：希望执教有雄心的球队
         </Text>
         <Text style={styles.content_text}>
               人们常说，失败会让你学到很多也许其中有些道理。我觉得胜利就像我的自然栖息地，这是我首次在18个月的执教时间里没能赢得任何奖杯...
         </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
   title_text:{
    color:'white',
    fontSize:22,
    textAlign:'center'
  },
  source_view:{
    flexDirection:'row',
    height:20,
    marginTop:10,
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor:'white',
  },
  source_text:{
    color:'#b1b1b1',
    fontSize:14,
    marginLeft:25,
    marginRight:25,
    textAlign:'center'
  },
  content_title_text:{
    color:'#343434',
    fontSize:20,
    marginTop:8,
    marginLeft:25,
    marginRight:25,
    textAlign:'left'
  },
  content_text:{
    color:'#b2b2b2',
    fontSize:16,
    marginTop:12,
    marginLeft:25,
    marginRight:25,
    textAlign:'left'
  },
});

效果图