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

上一章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}属性到文本元素。

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

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