在前一个例子中，我们在 jsx 入口文件中直接书写了样式。
样式书写具有如下特点：
border-radius ==> borderRadius文末附所有支持的样式列表
<View style={[styles.container,styles.new,{backgroundColor:'yellow'}]}>
<Text>hello world</Text>
</View>
const styles = {
container: {
backgroundColor: 'grey',
width: '750rem'
},
new:{
borderWidth:'1rem',
borderStyle:'solid',
borderColor:'#ffffff'
}
};
上述样式数组 merge 后的结果决定 View 的最终样式。
除了在 jsx 页面内部通过 js 对象声明样式外，为了工程化便利性与可读性，我们更推荐你使用单独的 style.less 书写样式。
// style.less
@bg: #3089dc;
@size: 32rem;
.container {
background-color: @bg; // 此处可以写驼峰式，也可以写类 css 语法，脚手架默认编译
}
.title {
font-size: @size;
}
// index.js
import styles from './style.less';
//...
return (<View style={styles.container}>
<Text style={styles.title>QAP project</Text>
</View>);
}
//...
注意：如果你的样式文件名是
*.less, 我们的工程脚手架将自动把属性名编译为驼峰式，并输出为 JS 文件，让你写样式更流畅。
1rem = 设备宽度（最短边） / 750
如我们推荐视觉稿产出宽度为750px，在这样的前提下，**我们在 750 的设计稿上量到的数值是100，那么 width : 100 rem 就是我们需要映射到元素上的尺寸**。
const styles={
button:{
width:'100rem',
height:80 // 缩写， 可以不写 rem , 直接写 number 类型。
}
}
你可以使用 :active 伪类来定义你的组件 press 时的样式。
<View style={{height:'300rem',backgroundColor:'#3089dc','backgroundColor:active':'#cccccc'}}>
<Text style={{color:'#ffffff'}}>普通使用</Text>
</View>
请注意以上伪类写法与 h5 端不同。
你也可以使用封装过后的 Touchable 组件的 activeStyle 定义伪类。
Native 支持的样式属性有限，和 web 的 css 属性名称与含义存在一小部分交集
| 属性 | 说明 |
|---|---|
width |
不支持100% 百分比 |
height |
不支持100% 百分比 |
boxSizing |
不需要写，默认盒模型border-box |
padding |
不支持空格分割4个方向的格式，如需单独设置，请分开写 |
paddingLeft |
|
paddingRight |
|
paddingTop |
|
paddingBottom |
|
margin |
不支持空格分割4个方向的格式，如需单独设置，请分开写 |
marginLeft |
|
marginRight |
|
marginTop |
|
marginBottom |
|
borderStyle |
不支持空格分割4个方向的格式，如需单独设置，请分开写 |
borderLeftStyle |
|
borderTopStyle |
|
borderRightStyle |
|
borderBottomStyle |
|
borderWidth |
不支持空格分割4个方向的格式，如需单独设置，请分开写 |
borderLeftWidth |
|
borderTopWidth |
|
borderRightWidth |
|
borderBottomWidth |
|
borderColor |
不支持空格分割4个方向的格式，如需单独设置，请分开写 |
borderLeftColor |
|
borderTopColor |
|
borderRightColor |
|
borderBottomColor |
|
borderRadius |
不支持空格分割4个方向的格式，如需单独设置，请分开写。目前在 <image> 和 <text> 组件上尚无法只定义一个或几个角的 borderRadius。比如你无法在这两个组件上使用 borderTopLeftRadius。 |
borderBottomLeftRadius |
|
borderBottomRightRadius |
|
borderTopLeftRadius |
|
borderTopRightRadius |
|
display |
不需要写，默认flex。不支持none block inlineBlock 等 |
visibility |
hidden visible |
flexDirection |
|
justifyContent |
|
alignItems |
|
position |
absoulte sticky fixed |
top |
|
bottom |
|
left |
|
right |
|
zIndex |
不支持 |
overflow |
visible在安卓端不生效 |
color |
支持 `rgb(255, 0, 0) rgba(255, 0, 0, 0.5) #ff0000 red 注意：不支持 #fff 这种简写形式 |
lines |
{number}类型， 指定文本行数。默认 0， 代表不限制行数。需配合text-overflow才能生效, h5端不生效 |
fontSize |
|
fontStyle |
可选值 normal italic，默认为 normal。 |
fontWeight |
字体粗细程度，可选 normal, bold, 400,700。normal= 400, bold = 700； 默认 normal。**不支持 lighter, bolder 这样的值**。 ios 端额外支持 100~900 精细控制 |
textDecoration |
可选值 none underline line-through，默认值为 none。 |
textAlign |
可选值 left center right，默认值为 left。暂不支持 justify, justify-all |
textOverflow |
可选值clip ellipsis |
