118 lines
4.1 KiB
Markdown
118 lines
4.1 KiB
Markdown
|
---
|
|||
|
|
title: Styling
|
|||
|
|
localeTitle: 造型
|
|||
|
|
---
|
|||
|
|
## React Native - 造型
|
|||
|
|
|
|||
|
|
React Native提供了一个用于创建样式表和样式化组件的API： [StyleSheet](https://facebook.github.io/react-native/docs/stylesheet) 。
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
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组件](https://facebook.github.io/react-native/docs/handling-touches#touchables) 。
|
|||
|
|
|
|||
|
|
样式也不像传统CSS那样继承。在大多数情况下，您必须声明每个组件的样式。
|
|||
|
|
|
|||
|
|
### Flexbox布局
|
|||
|
|
|
|||
|
|
React Native使用类似于web标准的[flexbox](https://facebook.github.io/react-native/docs/flexbox)实现。默认情况下，视图中的项目将设置为`display: flex` 。
|
|||
|
|
|
|||
|
|
> 如果您不想使用flexbox，还可以通过`relative`或`absolute`定位来安排React Native组件。
|
|||
|
|
|
|||
|
|
React Native中的`flexDirection: column`默认为`flexDirection: column` ，而不是`flex-direction: row` （web标准）。 `column`值垂直显示灵活项目，可以纵向移动设备。
|
|||
|
|
|
|||
|
|
要了解有关flexbox的更多信息，请访问[此CSS-Tricks详细指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)以及[Flexbox Froggy](http://flexboxfroggy.com/)的游戏化学习方法。
|
|||
|
|
|
|||
|
|
### 样式组件
|
|||
|
|
|
|||
|
|
在包含组件的文件中包含大量样式并不总是易于维护。样式组件可以解决此问题。
|
|||
|
|
|
|||
|
|
例如，Button组件可以在应用程序的多个位置使用。使用每个Button实例复制和粘贴样式对象效率很低。相反，创建一个可重用的样式Button组件：
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
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组件，而无需重复声明样式对象：
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
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的](../../bootstrap/index.md)功能，包括默认表单，按钮样式和页面布局选项。最受欢迎的库之一是[样式组件](https://github.com/styled-components/styled-components) 。您可以在npm和GitHub上找到许多其他人来自己尝试。
|