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

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

React Native样式设置
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?