React Native FlexBox布局(二) 应用篇

1、获取屏幕宽高

RN通过Dimensions组件来获取设备信息,

Dimensions路径：

.../node_modules/react-native/Libraries/Utilities

获取代码：

代码语言：javascript复制

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：

代码语言：javascript复制

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',）。

效果：

总结：绝对定位父类内边距设置不起作用。

react dimensions libraries native position

0 人点赞