reactNative跨平台app开发经验分享-css样式的使用

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

RN的css样式编辑
在RN的开发环境中，是无法直接引入css文件或less，sass的
而是使用了js作为样式编译
所有的RN样式全部使用js文件
使用方法如下

// 导入StyleSheet模块
import { View, Text, Image, ......, StyleSheet } from "react-native"

// 使用方法

// 样式写法
const PROJECTSTATISTICS = StyleSheet.create({
    navView: {
        flexDirection: "column",
        justifyContent: "flex-start"
    },

    InnerView: {
        paddingTop: scaleSize(38),
        paddingBottom: scaleSize(26),
        paddingLeft: scaleSize(32),
        backgroundColor: "rgba(248,248,248,1)"
    }
}）

// 用法
class Index extends Component{
    constructor(props) {
        super(props);
        
        ......
    }

    render() {
        return (
            <View style={PROJECTSTATISTICS.navView}>
                <View style={PROJECTSTATISTICS.InnerView}>
                      <Text>{...}</Text>
                </View>
            </View>
        ）
    }
}

js格式的样式，与普通css写法基本相同，只是-换成了驼峰模式
可以和css一样的写在行间，内联，和外部（import引用）

注意：
RN的样式，布局不支持浮动，只能使用普通布局或者flex布局
有些原生css样式，RN也是不支持的，具体可以百度查询

RN的样式写法，由于style属性内部支持变量函数运算，所以比较自由
可以在style里使用三目来简化样式判断方法，
来达到样式分别自定义的目的

// 样式自定义
render() {
    const { data } = this.state;
      return (
           <View style={[{paddingLeft: 10}, data === 1 ? PROJECTSTATISTICS.navView : null]}>
                  <View style={[{paddingLeft: 10}, data === 2 ? PROJECTSTATISTICS.InnerView : null]}>
                         {/**当data属性变化的时候，根据变化值返回相应的样式*/}
                          <Text>{...}</Text>
                   </View>
            </View>
     ）
}