创建样式
const styles = StyleSheet.create({
container: {
backgroundColor: "#eae7ff",
flex: 1
}
});
应用样式
render() {
return (
<View style={styles.container}></View>
);
}
样式详解
如果给最外面的view设置样式:
container: { backgroundColor: "#eae7ff", flex: 1, marginTop: 20; }
其中
flex:1
会撑满全部手机界面,marginTop:20
会留出上面状态栏的位置常用样式
container: { backgroundColor: "#eae7ff", /*设置背景色*/ borderColor:"red", /* 设置边框颜色 */ borderWidth:1, /* 设置边框宽度 */ borderRadius:10, /* 设置边框圆角 */ shadowColor: "#ccc", /* 阴影颜色 */ shadowOpacity: 0.5 /* 设置阴影透明度 */ shadowRadius: 2, /* 设置阴影扩散程度 */ shadowOffset:{ height:1, /* 设置阴影偏倚:垂直方向偏移量 */ width:1 /* 设置阴影偏倚:水平方向偏移量 */ } },
文字样式
title: { fontSize: 26, /* 文字大小 */ color: "red", /* 文字颜色 */ textAlign: "center", /* 文字对齐方式:auto,left,right,center,justify */ fontSyle: "italic", /* 文字样式 */ letterSpacing: 2, /* 文字间距 */ lineHeight: 20, /* 文字行高 */ fontFamily: "Helvetica Neue", /* 文字字体 */ fontWeight: "300",