React Native - 样式

• 

  简述

  在 React Native 中有几种方法可以为你的元素设置样式。

  您可以使用style属性来添加内联样式。但是，这不是最佳实践，因为可能很难阅读代码。

  在本章中，我们将使用Stylesheet用于造型。
• 

  容器组件

  在本节中，我们将简化上一章中的容器组件。

  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 (
           <View>
              <PresentationalComponent myState = {this.state.myState}/>
           </View>
        );
     }
  }
  

• 

  表示组件

  在下面的示例中，我们将导入StyleSheet. 在文件的底部，我们将创建样式表并将其分配给styles持续的。请注意，我们的样式在camelCase我们不使用px或 % 用于样式。

  要将样式应用于我们的文本，我们需要添加style = {styles.myText}财产给Text元素。

  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,
        textMoogn: 'center',
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 20
     }
  })
  

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