一、样式声明
1.内联样式:
一般情况下,内联样式简单粗暴,让你可以快速的调试,但内敛样式比较低效,一般情况下应该避免使用
<Text style = {{fontSize:20,fontStyle:'normal',fontWeight:'bold'}}>和乐乐了哦</Text>
2.对象样式:
对比内联样式的语法,是将内联样式分离出来,避免每一次render方法时都进行创建样式
const italic = {fontSize:20, fontStyle:'italic',fontWeight:'bold'};
<Text style = {italic}>我是对象样式</Text>
3.使用StyleSheet.create:
StyleSheet.create创建的样式,可以减少内存分配数,从而提高性能,StyleSheet是不可变的,通常能够带来一些遍历,
StyleSheet还能帮你检查样式语法是否合理。所以它是一个不错的样式选择
const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
<Text style ={styles.font}>我是StyleSheet.create创建的样式</Text>
4.样式拼接:
一个组件对多个样式的复用,就可以使用样式拼接,样式拼接是结合样式的一种实用的方法
const styles = StyleSheet.create({font: {fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
<Text style = {[styles.content,styles.font]}>我是组合样式一</Text>
<Text style = {[styles.content,styles.font,{color:'#666666'}]}>我是组合样式二</Text>
5.条件样式:
根据渲染逻辑对组件进行样式设置
constructor(props){
super(props);
this.state = {
toucher:false,
}
}
使用如下
const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
<Text style = {this.state.toucher && styles.font}>我是条件样式</Text>
6.导出样式对象
随着样式变得越来越复杂,我们将样式从组件JavaScript代码中分离出来,通过组件来划分目录,是代码开发管理容易
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
text:{
fontSize:18,
color:'#ff00ff',
},
bold:{
fontWeight:'bold'
}
});
export default styles;
/导入样式对象,并使用
import exStyles from '../comment_style/styles';
<Text style ={[exStyles.text,exStyles.bold]}>我是导出样式</Text>
7.使用父类样式
使用组件样式进行传递,从而更有效的被父组件控制流程和操作样式。
class UserStyle extends Component{
render(){
return(
<View>
<Text style = {this.props.style}>我是父类的属性样式,并且使用了导出样式</Text>
</View>
);
}
}
//使用
<UserStyle style = {[exStyles.text,exStyles.bold]}></UserStyle>
8.复用和样式共享:
就是将项目组件和样式分包管理,大概组织成如下样式:
- js
|- components
|- Button
|- index.js
|- styles.js
|- styles
|- styles.js
|- colors.js
|- fonts.js
二、学习使用完整案例
import React,{Component} from 'react';
import {
StyleSheet,
View,
Text,
Image
} from 'react-native';
import exStyles from '../comment_style/styles';
const italic = {fontSize:20, fontStyle:'italic',fontWeight:'bold'};
const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
export default class InStyles extends Component{
constructor(props){
super(props);
this.state = {
toucher:false,
}
}
render(){
return (
<View>
<Text style = {{fontSize:20,fontStyle:'normal',fontWeight:'bold'}}>我是内敛样式</Text>
<Text style = {italic}>我是对象样式</Text>
<Text style ={styles.font}>我是StyleSheet.create创建的样式</Text>
<Text style = {[styles.content,styles.font]}>我是组合样式一</Text>
<Text style = {[styles.content,styles.font,{color:'#666666'}]}>我是组合样式二</Text>
<Text style = {this.state.toucher && styles.font}>我是条件样式</Text>
<Text style ={[exStyles.text,exStyles.bold]}>我是导出样式</Text>
<UserStyle style = {[exStyles.text,exStyles.bold]}></UserStyle>
</View>
);
}
}
class UserStyle extends Component{
render(){
return(
<View>
<Text style = {this.props.style}>我是父类的属性样式,并且使用了导出样式</Text>
</View>
);
}
}