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

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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

  

  

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` 属性，但取值不同
* `textDecorationColoriOS` | color | 对应 CSS 中的 `text-decoration-color` 属性
* `textDecorationLineiOS` | `none, underline, line-through, underline line-through` | 对应 CSS 中的 `text-decoration-line` 属性，但阉割了 `overline, blink 取`值
* `textDecorationStyleiOS` | `solid, double, dotted, dashed` | 对应 CSS 中的 `text-decoration-style` 属性，但阉割了 `wavy` 取值
* `writingDirectioniOS` | `auto, ltr, rtl` | 对应 CSS 中的 `direction` 属性，增加了 `auto` 取值


#### 3.8 弹性布局相关 (Flex)


属性名称 取值 对应 css 属性


* `flex` | number | 对应 CSS 中的 `flex` 属性
* `flexDirection` | `row, column` | 对应 CSS 中的 `flex-direction` 属性，但阉割了 `row-reverse, column-reverse` 取值
* `flexWrap` | `wrap, nowrap` | 对应 CSS 中的 `flex-wrap` 属性，但阉割了 `wrap-reverse` 取值
* `justifyContent` | `flex-start, flex-end, center, space-between, space-around` | 对应 CSS 中的 `justify-content` 属性，但阉割了 `stretch` 取值。
* `alignItems` | `flex-start, flex-end, center, stretch` | 对应 CSS 中的 `align-items` 属性，但阉割了 `baseline` 取值。
* `alignSelf` | `auto, flex-start, flex-end, center, stretch` | 对应 CSS 中的 `align-self` 属性，但阉割了 `baseline` 取值


#### 3.9 转换相关 (transform)


属性名称 取值 对应 css 属性


* `transform` | `[{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, - - - {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]` | 对应 CSS 中的 `transform` 属性
* `transformMatrix` | `TransformMatrixPropType` | 类似于 CSS 中 `transform` 属性的 `matrix()` 和 `matrix3d()` 函数
* `backfaceVisibility` | `visible, hidden` | 对应 CSS 中的 `backface-visibility` 属性


#### 3.10 图片相关


属性名称 取值 对应 css 属性


* `resizeMode` | `cover, contain, stretch` 其中，`contain` 是指无论如何图片都包含在指定区域内，假设设置的宽度高度比图片大，则图片居中显示，否则，图片等比缩小显示
* `overflow` | `visible, hidden` 超出部分是否显示，`hidden` 为隐藏
* `tintColor` | number 着色，`rgb` 字符串类型
* `opacity`| number 透明度


#### 3.11 图像变换


属性名称 取值 对应 css 属性


* `rotation` – 旋转
* `scaleX` – 水平方向缩放
* `scaleY` – 垂直方向缩放


### Vue

* 什么是MVVM？

* mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

* 组件之间的传值？

* Vue 双向绑定原理

* 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

* 虚拟 DOM 实现原理

* Vue 中 key 值的作用？

* Vue 的生命周期

* Vue 组件间通信有哪些方式?

* vue 中怎么重置 data?

* 组件中写 name 选项有什么作用？

* Vue 的 nextTick 的原理是什么？

* Vuex 有哪几种属性?  

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

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

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