ReactNative从零到完整项目-style使用详解

项目连接： 93Laer/MyDemo

关键点：

• 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，并赋值给自己，所以最后一次赋值就会显示效果