ReactNative进阶（五十一）: 常见样式梳理
一、前言
的样式是 样式的一个子集，并且属性名称与 中规定的也不完全相同。
二、样式引入方法
常见的引用样式的几种方法，包括内嵌方式，外联方式和混合方式，还可以把样式定义在单独的文件中，通过 引用。
1. 内嵌方式
export default class appProject extends Component {
render() {
return (
)
}
}
2. 外联方式
const Styles = StyleSheet.create({
container: {
marginTop:200,
marginLeft:5,
marginRight:5,
height:84,
flexDirection:'row',
backgroundColor:'#FF0067',
}
});
3. 混合方式
export default class appProject extends Component {
render() {
return (
//外层容器
)
}
}
4.import 引用
import React from 'react'
import {
StyleSheet,
} from 'react-native';
const styles = StyleSheet.create({
container: {
marginTop:200,
marginLeft:5,
marginRight:5,
height:84,
flexDirection:'row',
},
bg:{
backgroundColor:'#FF0067',
}
});
module.exports = styles;
通过 进行引入
import styles from './styles/style';
三、常见属性及说明
3.1 背景
属性名称 取值 对应 属性
｜ ｜ 对应 中的 属性
3.2 宽高尺寸
属性名称 取值 对应 属性
｜ | 对应 中的 属性
| | 对应 中的 属性
3.3 外边距相关 (margin)
属性名称 取值 对应 css 属性
| | 对应 CSS 中的 属性，不同的是，只能定义一个参数，用以表示上、右、下、左 4 个方位的外补白
| | CSS 中没有对应的属性，相当于同时设置 和
| | CSS 中没有对应的属性，相当于同时设置 和
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
3.4 内边距相关 (padding)
属性名称 取值 对应 css 属性
| number 对应 CSS 中的 属性，不同的是，只能定义一个参数，用以表示上、右、下、左 4 个方位的内补白
| number CSS 中没有对应的属性，相当于同时设置 和
| number CSS 中没有对应的属性，相当于同时设置 和
| number 对应 CSS 中的 属性
| number 对应 CSS 中的 属性
| number | 对应 CSS 中的 属性
| number | 对应 CSS 中的 属性
3.5 边框相关 (border)
属性名称 取值 对应 css 属性
| 对应 CSS 中的 属性，但阉割了 取值，且无方向分拆属性
| | 对应 CSS 中的 属性
| number 对应 CSS 中的 属性
| number 对应 CSS 中的 属性
| number 对应 CSS 中的 属性
| number 对应 CSS 中的 属性
| color | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性
3.6 位置相关 (position)
属性名称 取值 对应 css 属性
| 对应 CSS 中的 属性，但阉割了 取值
| number | 对应 CSS 中的 属性
| number | 对应 CSS 中的 属性
| number | 对应 CSS 中的 属性
| number | 对应 CSS 中的 属性
3.7 文本相关 (Text)
属性名称 取值 对应 css 属性
| color | 对应 CSS 中的 属性
| string | 对应 CSS 中的 属性
| number | 对应 CSS 中的 属性
| 对应 CSS 中的 属性，但阉割了 取值
| 对应 CSS 中的 属性，但阉割了 取值
| number | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性，增加了 取值
| | 对应 CSS 中的 属性，增加了 取值， 取代了 ，并阉割了 - 等值
| color | 对应 CSS 中的 属性中的颜色定义
| | 对应 CSS 中的 属性中的阴影偏移定义
| number | 在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
| number | 对应 CSS 中的 属性，但取值不同
| color | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性，但阉割了 值
| | 对应 CSS 中的 属性，但阉割了 取值
| | 对应 CSS 中的 属性，增加了 取值
3.8 弹性布局相关 (Flex)
属性名称 取值 对应 css 属性
| number | 对应 CSS 中的 属性
| | 对应 CSS 中的 属性，但阉割了 取值
| | 对应 CSS 中的 属性，但阉割了 取值
| | 对应 CSS 中的 属性，但阉割了 取值。
| | 对应 CSS 中的 属性，但阉割了 取值。
| | 对应 CSS 中的 属性，但阉割了 取值
3.9 转换相关 (transform)
属性名称 取值 对应 css 属性
| | 对应 CSS 中的 属性
| | 类似于 CSS 中 属性的 和 函数
| | 对应 CSS 中的 属性
3.10 图片相关
属性名称 取值 对应 css 属性
| 其中， 是指无论如何图片都包含在指定区域内，假设设置的宽度高度比图片大，则图片居中显示，否则，图片等比缩小显示
| 超出部分是否显示， 为隐藏
| number 着色， 字符串类型
| number 透明度
3.11 图像变换
属性名称 取值 对应 css 属性
– 旋转
– 水平方向缩放
– 垂直方向缩放
– 水平方向平移
– 水平方向平移