基本样式
1 )
backfaceVisibility:visible|hidden;属性定义当元素不面向屏幕时是否可见
backgroundColor:背景色
transform
transformMatrix
2)定位
position:定位：相对定位(absolute)，绝对定位(relative) 默认情况下使用的是相对定位
top:上
bottom:下
left:左
right:右
3)图像变换
scaleX :水平方向缩放
scaleY :垂直方向缩放
rotation :旋转
translateX :水平方向平移
translateY :水平方向平移
4)阴影
shadowColor
shadowOffset
shadowOpacity
shadowRadius
5)图片相关属性
resizeMode:enum('cover','contain','stretch') contain是指无论如何图片都包含在指定区域内，假设设置的宽度高度比图片大，则图片居中显示，否则，图片等比缩小显示
overflow:enum('visible','hidden')
tintColor:着色，rgb字符串类型
opacity:透明度
6)字体相关属性
color:字体颜色
fontFamily:字体族
fontSize:字体大小
fontStyle:字体样式,正常,倾斜，值为enum('normal','italic')
fontWeight:字体粗细，值为enum('normal','bold','100','200'...,'900')
letterSpacing:字符间隔
lineHeight:行高
textAlign:字体对齐方式,值为enum('auto','left','right','center','justify')
textDecorationColor:貌似没效果，修饰的线的颜色
textDecorationLine:貌似没效果，字体修饰，上划线，下划线，删除线，无修饰，值为enum("none",'underline','line-through','underline line-through')
textDecorationStyle:enum("solid",'double','dotted','dashed')貌似没效果，修饰的线的类型
writingDirection:enum("auto",'ltr','rtl')不知道什么属性，写作方向？从左到右？从右到左？
7)边框相关
borderStyle:边框样式
borderWidth:所有边框宽度
borderTopWidth:顶部边框宽度
borderBottomWidth:底部边框宽度
borderLeftWidth:左边边框宽度
borderRightWidth:右边框宽度
borderColor:边框颜色
borderTopColor:顶部边框颜色
borderBottomColor:底部边框颜色
borderLeftColor:左边边框颜色
borderRightColor:右边边框颜色
8)边框圆角
borderRadius
borderBottomLeftRadius
borderBottomRightRadius
borderTopLeftRadius
borderTopRightRadius
9)Flex布局相关
flex:number
flexDirection: enum('row','column','row-reverse','column-reverse') 属性决定主轴的方向（即项目的排列方向）。
flexWrap:enum('wrap','nowrap','wrap-reverse') 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
alignItems:enum('flex-start','flex-end','center','stretch') 属性定义项目在交叉轴上如何对齐。
alignSelf:enum('auto','flex-start','flex-end','center','stretch') 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖
justifyContent:enum('flex-start','flex-end','center','space-between','space-around') 属性定义了项目在主轴上的对齐方式。
10)外边距
marginTop:上
marginBottom:下
marginLeft:左
marginRight:右
margin:相当于同时设置四个
marginVertical:相当于同时设置marginTop和marginBottom
marginHorizontal:相当于同时设置marginLeft和marginRight
11)内边距
paddingTop:上
paddingBottom:下
paddingLeft:左
paddingRight:右
padding:相当于同时设置四个
paddingVertical:相当于同时设置paddingTop和paddingBottom
paddingHorizontal:相当于同时设置paddingLeft和paddingRight
12)颜色渐变
1.安装
yarn add react-native-linear-gradient
react-native link react-native-linear-gradient
2.
// 引用官网的例子
import LinearGradient from 'react-native-linear-gradient';
react-native-linear-gradient有两个属性
默认情况下，渐变色的方向是从上向下的，假如你想渐变色从左向右，或者斜角渐变，就需要设置下了
start:{ x: number, y: number }
end:{ x: number, y: number }
例如：
start: { x: 0.3, y: 0.4 } 渐变是从 左侧30%， 上部 40% 开始
end: { x: 0.7, y: 0.8 } 渐变是从 左侧70%， 上部 80% 结束
<LinearGradient
start={{x: 0.25, y: 0.25}} end={{x: 0.75, y: 0.75}}
colors={['red', 'green', 'black']}
style={{height: 150, flex: 1}}>
</LinearGradient>
//start 就是渐变开始的位置，x、y 范围是 0 - 1 ，
//end 同上，就是渐变结束的位置
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
13)阴影
shadowColor —–阴影的颜色，颜色色值以rgba取色值
shadowOffset —-阴影的偏移量,{width:0, height:2}
shadowOpacity —设置阴影的不透明度
shadowRadius —-设置阴影的模糊半径
elevation —–用于android用于设置阴影用的
shadowStyle: {
shadowColor: '#000',
shadowOffset: { width: 4, height: 4 },
shadowOpacity: 0.8,
shadowRadius: 6,
elevation: 10
}
shadowStyle: {
shadowColor: 'rgba(0, 0, 0, 0.05)',
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 2,
elevation: 4,
},
