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

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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'}]}>
            </View>
        )
    }
}

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 属性，但取值不同
• 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 取值

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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

吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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