React Native设置元素样式 – React Native实战教程 _ReactNative实战教程

上一章React Native实战教程请查看：React Native prop介绍和用法
有几种方法可以在React Native中设置元素的样式。
可以使用style属性内联添加样式，然而，这不是最佳实践，因为它可能很难阅读代码。
在本章中，我们将使用样式表进行样式化。
容器组件在本节中，我们将简化前一章中的容器组件。
App.js

import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; import PresentationalComponent from './PresentationalComponent'; export default class App extends React.Component { state = { myState: '这是我的state', }; render() { return ( < View> < PresentationalComponent myState={this.state.myState} /> < /View> ); } }

表示组件在下面的示例中，我们将导入样式表，在文件的底部，我们将创建样式表并将其分配给styles常量。请注意，我们的样式是在camelCase中，我们不使用px或%作为样式。
要将样式应用到文本中，需要添加style = {styles.myText}属性到文本元素。
【React Native设置元素样式 – React Native实战教程】PresentationalComponent.js

import React, {Component} from 'react'; import {Text, View, StyleSheet} from 'react-native'; const PresentationalComponent = props => { return ( < View> < Text style={styles.myState}>{props.myState}< /Text> < /View> ); }; export default PresentationalComponent; const styles = StyleSheet.create({ myState: { marginTop: 20, textAlign: 'center', color: 'blue', fontWeight: 'bold', fontSize: 20, }, });

当我们运行应用程序时，我们将收到以下输出。