react-native添加样式
2018-08-23 本文已影响0人
FantDing
一、元素设置style属性
<View style={{backgroundColor:"#FDF6E3",flex:1}} ></View>
1.1 常见样式
container:{
backgroundColor:"#FDF6E3",
flex:1,
// marginTop:100,
margin:50,
borderWidth:1,
borderColor:"#FA5068",
borderRadius:16,
shadowOffset:{
height:3,
width:3
},
shadowColor:"#323837",
shadowRadius:16,
shadowOpacity:1,
}
1.2 文字样式
title:{
fontSize: 26,
color: "green",
fontStyle:"italic", //斜体
fontWeight:"900", //最粗,或者使用 "bold"
// fontFamily: //字体
letterSpacing:4,
lineHeight: 33,
textAlign: 'center',
textDecorationLine:'underline', // underline,line-through
textDecorationStyle:'dotted'
}
文字样式
二、创建style object: StyleSheet.create(obj)
class MovieTalk extends Component{
render(){
return (
<View style={styles.container} ></View>
)
}
}
let styles=StyleSheet.create({
container:{
backgroundColor:"#FDF6E3",
flex:1
}
})
三、区别
主要是性能问题,参考stackoverflow
- Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
- It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).