学习交流:https://gitee.com/potato512/Learn_ReactNative
react-native学习交流QQ群:806870562
- const styles = StyleSheet.create({
- // 样式名称
- nameStyle: {
- // 方向:默认纵向column,横向row
- flexDirection: column,// 分行:wrap,或nowrap
- flexWrap: wrap,// flex-start、flex-end、center、space-between、space-around
- justifyContent: 'flex-start',// flex-start、flex-end、center、stretch
- alignItems: 'flex-start',// 当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩)。
- flex: 1,// auto,flex-start,flex-end,center,stretch
- alignSelf: auto,// 定位:绝对定位relative,相对定位absolute,固定定位pix
- position: absolute,// 定位左边缘
- left: 10,// 定位右边缘
- right: 10,// 定位上边缘
- top: 10,// 定位下边缘
- bottom: 10,// 背景颜色
- backgroundColor: 'black',// 内边距(文字距离Text组件的边距)
- padding: 10,// 上内边距
- paddingTop: 5,// 下内边距
- paddingBottom: 5,// 左内边距
- paddingLeft: 5,// 右内边距
- paddingRight: 5,// 左右内边距
- paddingHorizontal: 10,// 下上内边距
- paddingVertical: 10,// 坐标(四周)距离四周都是 10
- margin: 10,// x 坐标 (外边距-距离左边,或右边) ------ 与根视图的两个属性关联justifyContent & alignItems
- marginLeft: 10,marginRight: 0,// y 坐标 (外边距-距离上边,或下边) ------ 与根视图的两个属性关联justifyContent & alignItems
- marginTop: 50,marginBottom: 30,// 字体名称(楷体、方正等)
- fontFamily:'',// 字体样式(粗体、斜体等)
- fontStyle: '',// 字体大小
- fontSize: 20,// 字体排版,即对齐方式 (auto、left、right、center、justify)
- textAlign: 'left',// 字体颜色
- color:'red',// 边框样式 (solid-固体/立方体、dotted-布满的/打点的、dashed-虚线)
- borderStyle: 'dashed',// 边框颜色
- borderColor:'red',// 边框圆角
- borderRadius: 9,// 边框宽度
- borderWidth: 1,// 上边框宽度
- borderTopWidth: 1,// 左边框宽度
- borderLeftWidth: 1,// 右边框宽度
- borderRightWidth: 1,// 下边框宽度
- borderBottomWidth: 1,// Text组件的影子颜色
- shadowColor: "red",// Text组件的影子倾斜度
- shadowOffset: 10,// 内容文本影子颜色
- textShadowColor: "red",// 前置颜色(一般用不到)tintColor: 'red',// 组件高度
- height: 85,// 组件宽度
- width: 350,// 组件最大高度,自适应宽度情况下用到maxHeight: 80,// 组件最大宽度,自适应高度情况下用到maxWidth: 80,},});
颜色设置格式
'#f0f'
(#rgb)'#f0fc'
(#rgba)'#ff00ff'
(#rrggbb)'#ff00ff00'
(#rrggbbaa)'rgb(255,255,255)'
'rgba(255,1.0)'
'hsl(360,100%,100%)'
'hsla(360,monospace;font-size:12.600000381469727px;">'transparent'
'red'
0xff00ff00
(0xrrggbbaa)
Text组件的字体垂直对齐方式
1、当Text没有被其他组件包含时,设置属性lineHeight的高度等于组件的高度。
2、当Text被其他组件B包含时,可以设置其他组件B的属性justifyContent的值为center。