react-native 筆記StyleSheet

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, {Component} from ‘react’;
import {
AppRegistry,//註冊
StyleSheet,//樣式
Text,//文本組件
View,//視圖組件
Image//圖片組件
} from ‘react-native’;

//引入像素點庫
var Dimension = require(‘Dimensions’);
export default class HelloWorld extends Component {
//初始化方法 相當於viewDidLoad
render() {

    let pic = {

        uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490157578230&di=b360250681099e0af6030f1202163d90&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F908fa0ec08fa513dde11606e3d6d55fbb3fbd9c3.jpg'

    };

    return (
        <View style={mystyles.container}>
            <View style={mystyles.innerViewStyle}>
                <Text>
                    當前屏幕寬度：{Dimension.get('window').width}
                </Text>
            </View>
            <View style={mystyles.innertwoStyle}>
                <Text>
                    當前屏幕的高度：{Dimension.get('window').height}
                </Text>
            </View>
            <View style={mystyles.innerViewStyle}>
                <Text>
                    當前屏幕的分辨率：{Dimension.get('window').scale}
                </Text>
            </View>
        </View>
    );
}

}

//相當於css樣式
const mystyles = StyleSheet.create({

container: {
    //主軸
    // justifyContent: 'center',//水平
    // alignItems: 'center',//垂直
    //改變主軸的方向
    //column  從上到下
    //column-reverse 從下往上
    //row 從左往右
    //row-reverse 從右往左
    flexDirection: 'column-reverse',
},

foneColor: {

    color: 'green',


},

innerViewStyle: {

    backgroundColor: 'green',
    width: 100,
    height: 100,
    justifyContent:'center',
    alignItems:'center',
},

innertwoStyle:{
    backgroundColor: 'red',
    width: 100,
    height: 100,
    justifyContent:'center',
    alignItems:'center',

}

});

//註冊Demo 輸出到ios應用
AppRegistry.registerComponent(‘HelloWorld’, () => HelloWorld);