React Native Text组件 – React Native实战教程

上一章React Native实战教程请查看：React Native Switch组件

在本章中，我们将讨论React Native中的Text文本组件。

这个组件可以嵌套，它可以从父组件继承属性到子组件，这在很多方面都很有用。我们将向你展示首字母大写、样式化单词或文本部分等示例。

步骤1：创建文件

我们要创建的文件是text_example.js

步骤2：App.js

在这一步中，我们将创建一个简单的容器。

App.js

import React, {Component} from 'react';
import TextExample from './text_example.js';

const App = () => {
  return <TextExample />;
};
export default App;

步骤3：Text文本

在这一步中，我们将使用继承模式，style.text将应用于所有Text文本组件。

你还可以注意到我们是如何为文本的某些部分设置其他样式属性的，重要的是要知道所有的子元素都有父样式传递给它们。

text_example.js

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

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

        <Text>ove you, always.</Text>

        <Text>
          un y uno <Text style={styles.wordBold}>srcmini02.com </Text>a return
          bird
        </Text>

        <Text style={styles.italicText}>very this</Text>

        <Text style={styles.textShadow}>why not and</Text>
      </Text>
    </View>
  );
};
export default TextExample;

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

你将收到以下输出