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

上一章React Native实战教程请查看：React Native Switch组件
在本章中，我们将讨论React Native中的Text文本组件。
【React Native Text组件 – React Native实战教程】这个组件可以嵌套，它可以从父组件继承属性到子组件，这在很多方面都很有用。我们将向你展示首字母大写、样式化单词或文本部分等示例。
步骤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}>srcmini.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, }, });

你将收到以下输出