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

项目连接： 93Laer/MyDemo
关键点：

• 1、style定义的方式有几种，怎样定义
• 2、给组件传入一个style数组时以哪个style为准

style的定义方式：

• 1、直接在render（）函数中定义

       //todo 设置样式一,直接在render中定义样式
        var mStyle = {color:'red',fontSize:34};
        //return https://github.com/93Laer 
        //类似于安卓中的匿名内部内
        //return https://github.com/93Laer 

• 2、方式二，通过StyleSheet创建style
  • 创建样式

    const styles = StyleSheet.create({
        bigblue:{
            color:'blue',
            fontSize:34,
            fontWeight:'bold'
        },
        red:{
            color:'red',
            fontSize:14
        }
    });
    

    • 使用样式

        //todo 设置样式二，通过StyleSheet创建样式
        //return https ://github.com/93Laer 
    

测试多个style，以哪个为准

• 1、直接在组件中传入多个style对象,最后显示的效果就不展示了，在结尾直接给出结论

//这里通过多种方式定义style，主要是告诉读者定义style的多种方式
 var mStyle = {color:'red',fontSize:34};
 return https ://github.com/93Laer 

• 2、 通过StyleSheet创建多个style，并传入

 return https ://github.com/93Laer 

结论：当设置多个style时以最后一个为准，可理解为最后一个将之前的样式覆盖了。也可理解为，style从styles数组中依次拿出style，并赋值给自己，所以最后一次赋值就会显示效果