React Native FlexBox布局(二) 应用篇

星宇大前端

发布于 2019-01-15 14:52:08

6480

发布于 2019-01-15 14:52:08

文章被收录于专栏：大宇笔记大宇笔记

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);

效果：