📌  相关文章
📜  React Native-样式

📅  最后修改于: 2020-12-08 06:05:56             🧑  作者: Mango

有两种方法可以在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: 'This is my state'
   }
   render() {
      return (
         
            
         
      );
   }
}

表现成分

在下面的示例中，我们将导入StyleSheet 。在文件的底部，我们将创建样式表并将其分配给样式常量。请注意，我们的样式在camelCase中，并且我们不使用px或％进行样式设置。

要将样式应用于文本，我们需要向Text元素添加style = {styles.myText}属性。

PresentationalComponent.js

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

const PresentationalComponent = (props) => {
   return (
      
         
            {props.myState}
         
      
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

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

反应本机样式