freeCodeCamp/guide/chinese/react-native/styling/index.md

title	localeTitle
Styling	造型

React Native - 造型

React Native提供了一个用于创建样式表和样式化组件的API： StyleSheet 。

import React, { Component } from 'react'; 
 import { StyleSheet, View, Text } from 'react-native'; 
 
 export default class App extends Component { 
  render () { 
    return ( 
      <View> 
        <Text style={styles.header}>I am a header!</Text> 
        <Text style={styles.text}>I am some blue text.</Text> 
      </View> 
    ); 
  } 
 } 
 
 const styles = StyleSheet.create({ 
  header: { 
    fontSize: 20 
  }, 
  text: { 
    color: 'blue' 
  } 
 }); 

虽然常规CSS样式表无效，但React Native的CSS超集与传统CSS非常相似。 StyleSheet中的许多CSS属性（例如color ， height ， top ， right ， bottom ， left ）都相同。任何具有连字符（例如font-size ， background-color ）的CSS属性都必须更改为camelCase（例如fontSize ， backgroundColor ）。

StyleSheet中并不存在所有CSS属性。由于在移动设备上没有真正的悬停概念，因此React Native中不存在CSS悬停属性。相反，React Native提供了响应触摸事件的Touchable组件 。

样式也不像传统CSS那样继承。在大多数情况下，您必须声明每个组件的样式。

Flexbox布局

React Native使用类似于web标准的flexbox实现。默认情况下，视图中的项目将设置为display: flex 。

如果您不想使用flexbox，还可以通过relative或absolute定位来安排React Native组件。

React Native中的flexDirection: column默认为flexDirection: column ，而不是flex-direction: row （web标准）。 column值垂直显示灵活项目，可以纵向移动设备。

要了解有关flexbox的更多信息，请访问此CSS-Tricks详细指南以及Flexbox Froggy的游戏化学习方法。

样式组件

在包含组件的文件中包含大量样式并不总是易于维护。样式组件可以解决此问题。

例如，Button组件可以在应用程序的多个位置使用。使用每个Button实例复制和粘贴样式对象效率很低。相反，创建一个可重用的样式Button组件：

import React from 'react'; 
 import { Text, TouchableOpacity } from 'react-native'; 
 
 const Button = ({ onPress, children }) => { 
  const { buttonStyle, textStyle } = styles; 
  return ( 
    <TouchableOpacity onPress={onPress} style={buttonStyle}> 
      <Text style={textStyle}> 
        {children} 
      </Text> 
    </TouchableOpacity> 
  ); 
 }; 
 
 export default Button; 
 
 const styles = { 
  textStyle: { 
    alignSelf: 'center', 
    color: '#336633', 
    fontSize: 16, 
    fontWeight: '600', 
    paddingTop: 10, 
    paddingBottom: 10 
  }, 
  buttonStyle: { 
    backgroundColor: '#fff', 
    borderWidth: 1, 
    borderColor: '#336633', 
    paddingTop: 4, 
    paddingBottom: 4, 
    paddingRight: 25, 
    paddingLeft: 25, 
    marginTop: 10, 
    width: 300 
  } 
 }; 

可以在应用程序中轻松导入和使用样式化Button组件，而无需重复声明样式对象：

import React, { Component } from 'react'; 
 import { TextInput, View } from 'react-native'; 
 import Button from './styling/Button'; 
 
 export default class Login extends Component { 
  render() { 
    return ( 
        <View> 
          <TextInput placeholder='Username or Email' /> 
          <TextInput placeholder='Password' /> 
          <Button>Log In</Button> 
        </View> 
    ); 
  } 
 } 

造型图书馆

有一些流行的React Native样式库。其中一些提供类似于Bootstrap的功能，包括默认表单，按钮样式和页面布局选项。最受欢迎的库之一是样式组件 。您可以在npm和GitHub上找到许多其他人来自己尝试。