ReactNative里面定义样式有两种方式
1、行内样式
2、使用StyleSheet定义样式
3、Demo地址：https://github.com/cenxiaoping/ReactNativeDemo
1、行内样式定义
<View style={{backgroundColor:"#ff0000",flex:1,margin:30}}></View>
2、使用StyleSheet定义样式
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
class Hello extends Component {
render() {
return (
<View style={styles.rootview}></View>
);
}
}
let styles = StyleSheet.create({
rootview: {
backgroundColor: "#ea9879",//背景颜色
flex:1,//相当于android中的权重widget
padding:15,//和android中的padding意义一样
margin:30,//和android中的margin意义一样
borderRadius:15,//边框转角度数，相当于shape中的conners
borderColor:"#00ff00",//边框颜色
borderWidth:5,//边框宽度
shadowColor:"#343",//阴影颜色
shadowOpacity:0.4,//阴影透明度，值范围0——1
shadowRadius:2,//阴影偏移角度
shadowOffset:{
height:1,//阴影垂直方向偏移距离
width:1//水平方向偏移距离
}
}
})
//指定默认显示的类，也可以直接在class前面带上
export default Hello
3、行内样式和StyleSheet组合使用
//使用中括号[]，可以使用同时使用两种方式定义的样式，行内样式优先级最高，
//当StyleSheeet和行内样式定义了同一个属性时，会优先使/用行内样式
class Hello extends Component {
render() {
return (
<View style={[styles.rootview,{margin:50}]}></View>
);
}
}
let styles = StyleSheet.create({
rootview: {
backgroundColor: "#ea9879",
flex:1,//xiangd
padding:15,
borderRadius:30,
borderColor:"#ff0000",
borderWidth:5,
shadowColor:"#343",
margin:10,
shadowOpacity:0.4,
shadowRadius:2,
shadowOffset:{
height:1,
width:1
}
}
})