React Native FlexBox佈局(二) 應用篇

ZY_FlyWay發表於2017-08-14
React NativeFlex

1、獲取螢幕寬高

RN通過Dimensions元件來獲取裝置資訊,

Dimensions路徑：
.../node_modules/react-native/Libraries/Utilities

獲取程式碼：

import React, { Component } from 'react';
import {
   AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

const Dimensions = require('Dimensions');
const {width, height, scale} = Dimensions.get('window');

class RNHybrid extends Component {

  render() {
    return(
        <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
        <Text>
               當前的螢幕的寬度是: {width + '\n'}
               當前的螢幕的高度是: {height + '\n'}
               當前的螢幕的解析度是: {scale + '\n'}
        </Text>
        </View>
      );
  }
}

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

執行結果(6s模擬器):







2、應用示例

2.1絕對定位和相對定位

  
相對定位

usage：

import React, { Component } from 'react';
import {
   AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

const Dimensions = require('Dimensions');
const {width, height, scale} = Dimensions.get('window');

class RNHybrid extends Component {

  render() {
    return(
        <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
             <View style={{backgroundColor:'black',paddingTop:50,width:width,height:200}}>
                <Image source={{uri:'test'}} style={styles.image1Style}/>
             </View>
        </View>
      );
  }
}

const styles = StyleSheet.create({
    image1Style:{
        position:'relative',
        width:100,
        height:100,
        left:200,
        top:0,
    },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

效果：




總結：相對定位遵守父類內邊距設定，如： 例子內邊距為50


絕對定位

usage（css  position樣式修改為 position:'absolute',）。

效果：





總結：絕對定位父類內邊距設定不起作用。

相關文章