ReactNative进阶（五十一） 常见样式梳理_reactnative css position

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

            height:84,
            flexDirection:'row',
            backgroundColor:'#FF0067',
            }
            }>
        </View>
    )
}

}

**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 (
//外层容器
<View style={[Styles.container,Styles.bg,{color:‘red’}]}>

)
}
}

**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` 进行引入

import styles from ‘./styles/style’;

### 三、常见属性及说明


#### 3.1 背景


属性名称 取值 对应 `css` 属性


* `backgroundColor`｜ `color` ｜ 对应 `CSS` 中的 `background-color` 属性


#### 3.2 宽高尺寸


属性名称 取值 对应 `css` 属性


* `width`｜`number` | 对应 `CSS` 中的 `width` 属性
* `height` | `number` | 对应 `CSS` 中的 `height` 属性


#### 3.3 外边距相关 (margin)


属性名称 取值 对应 css 属性


* `margin` | `number` | 对应 CSS 中的 `margin` 属性，不同的是，只能定义一个参数，用以表示上、右、下、左 4 个方位的**外补白**
* `marginHorizontal` | `number` | CSS 中没有对应的属性，相当于同时设置 `marginRight` 和 `marginLeft`
* `marginVertical` | `number` | CSS 中没有对应的属性，相当于同时设置 `marginTop` 和 `marginBottom`
* `marginTop` | `number` | 对应 CSS 中的 `margin-top` 属性
* `marginRight` | `number` | 对应 CSS 中的 `margin-right` 属性
* `marginBottom` | `number` | 对应 CSS 中的 `margin-bottom` 属性
* `marginLeft` | `number` | 对应 CSS 中的 `margin-left` 属性


#### 3.4 内边距相关 (padding)


属性名称 取值 对应 css 属性


* `padding` | number 对应 CSS 中的 `padding` 属性，不同的是，只能定义一个参数，用以表示上、右、下、左 4 个方位的**内补白**
* `paddingHorizontal` | number CSS 中没有对应的属性，相当于同时设置 `paddingRight` 和 `paddingLeft`
* `paddingVertical` | number CSS 中没有对应的属性，相当于同时设置 `paddingTop` 和 `paddingBottom`
* `paddingTop` | number 对应 CSS 中的 `padding-top` 属性
* `paddingRight` | number 对应 CSS 中的 `padding-right` 属性
* `paddingBottom` | number | 对应 CSS 中的 `padding-bottom` 属性
* `paddingLeft` | number | 对应 CSS 中的 `padding-left` 属性


#### 3.5 边框相关 (border)


属性名称 取值 对应 css 属性


* `borderStyle` | `solid, dotted, dashed` 对应 CSS 中的 `border-style` 属性，但阉割了 `none, hidden, double, groove, ridge, inset, outset` 取值，且无方向分拆属性
* `borderWidth` | `number` | 对应 CSS 中的 `border-width` 属性
* `borderTopWidth` | number 对应 CSS 中的 `border-top-width` 属性
* `borderRightWidth`| number 对应 CSS 中的 `border-right-width` 属性
* `borderBottomWidth` | number 对应 CSS 中的 `border-bottom-width` 属性
* `borderLeftWidth` | number 对应 CSS 中的 `border-left-width` 属性
* `borderColor` | color | 对应 CSS 中的 `border-color` 属性
* `borderTopColor` | `color` | 对应 CSS 中的 `border-top-color` 属性
* `borderRightColor` | `color` | 对应 CSS 中的 `border-right-color` 属性
* `borderBottomColor` | `color` | 对应 CSS 中的 `border-bottom-color` 属性
* `borderLeftColor` | `color` | 对应 CSS 中的 `border-left-color` 属性
* `borderRadius` | `number` | 对应 CSS 中的 `border-radius` 属性
* `borderTopLeftRadius` | `number` | 对应 CSS 中的 `border-top-left-radius` 属性
* `borderTopRightRadius` | `number` | 对应 CSS 中的 `border-top-right-radius` 属性
* `borderBottomLeftRadius` | `number` | 对应 CSS 中的 `border-bottom-left-radius` 属性
* `borderBottomRightRadius` | `number` | 对应 CSS 中的 `border-bottom-right-radius` 属性


#### 3.6 位置相关 (position)


属性名称 取值 对应 css 属性


* `position` | `absolute, relative` 对应 CSS 中的 `position` 属性，但阉割了 `static, fixed` 取值
* `top` | number | 对应 CSS 中的 `top` 属性
* `right` | number | 对应 CSS 中的 `right` 属性
* `bottom` | number | 对应 CSS 中的 `bottom` 属性
* `left` | number | 对应 CSS 中的 `left` 属性


#### 3.7 文本相关 (Text)


属性名称 取值 对应 css 属性


* `color` | color | 对应 CSS 中的 `color` 属性
* `fontFamily` | string | 对应 CSS 中的 `font-family` 属性
* `fontSize` | number | 对应 CSS 中的 `font-size` 属性
* `fontStyle` | `normal, italic` 对应 CSS 中的 `font-style` 属性，但阉割了 `oblique` 取值
* `fontWeight` | `normal, bold 100~900` 对应 CSS 中的 `font-weight` 属性，但阉割了 `bolder, lighter` 取值
* `lineHeight` | number | 对应 CSS 中的 `line-height` 属性
* `textAlign` | `auto, left, right, center, justifyiOS` | 对应 CSS 中的 `text-align` 属性，增加了 `auto` 取值
* `textAlignVerticalAndroid` | `auto, top, bottom, center` | 对应 CSS 中的 `vertical-align` 属性，增加了 `auto` 取值，`center` 取代了 `middle`，并阉割了 - `baseline, sub` 等值
* `textShadowColor` | color | 对应 CSS 中的 `text-shadow` 属性中的颜色定义
* `textShadowOffset` | `{width: number, height: number}` | 对应 CSS 中的 `text-shadow` 属性中的阴影偏移定义
* `textShadowRadius` | number | 在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
* `letterSpacingiOS` | number | 对应 CSS 中的 `letter-spacing` 属性，但取值不同


### 最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

*   HTML5新特性，语义化

*   浏览器的标准模式和怪异模式

*   xhtml和html的区别

*   使用data-的好处

*   meta标签

*   canvas

*   HTML废弃的标签

*   IE6 bug，和一些定位写法

*   css js放置位置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

![](https://img-blog.csdnimg.cn/img_convert/64590c67cb47cd552a892ba710477f64.png)

*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/17fdfcb90fad04acc5e7273d1f853880.png)