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>
     ）
}