- 1、style定义的方式有几种，怎样定义
- 2、给组件传入一个style数组时以哪个style为准
style的定义方式：
- 1、直接在render（）函数中定义
//todo 设置样式一,直接在render中定义样式
var mStyle = {color:'red',fontSize:34};
//return<Text style={mStyle}> https://github.com/93Laer </Text>
//类似于安卓中的匿名内部内
//return<Text style={{color:'red',fontSize:34}}> https://github.com/93Laer </Text>
- 2、方式二，通过StyleSheet创建style
- 创建样式
const styles = StyleSheet.create({ bigblue:{ color:'blue', fontSize:34, fontWeight:'bold' }, red:{ color:'red', fontSize:14 } });- 使用样式
//todo 设置样式二，通过StyleSheet创建样式 //return<Text style={styles.bigblue}> https ://github.com/93Laer </Text>
- 创建样式
测试多个style，以哪个为准
- 1、直接在组件中传入多个style对象,最后显示的效果就不展示了，在结尾直接给出结论
//这里通过多种方式定义style，主要是告诉读者定义style的多种方式
var mStyle = {color:'red',fontSize:34};
return<Text style={[mStyle,{color: 'blue',fontSize:20}]}> https ://github.com/93Laer </Text>
- 2、 通过StyleSheet创建多个style，并传入
return<Text style={[styles.bigblue,styles.red]}> https ://github.com/93Laer </Text>
结论：当设置多个style时以最后一个为准，可理解为最后一个将之前的样式覆盖了。也可理解为，style从styles数组中依次拿出style，并赋值给自己，所以最后一次赋值就会显示效果
