React Native 获取设备的宽高

最新推荐文章于 2025-01-18 22:11:16 发布

会飞的程序员zjm

最新推荐文章于 2025-01-18 22:11:16 发布

阅读量1k

点赞数

分类专栏： ios

本文链接：https://blog.youkuaiyun.com/zuojinmin/article/details/71156157

版权

ios 专栏收录该内容

93 篇文章

订阅专栏

该博客展示了如何在React Native应用中通过Dimensions模块获取设备的屏幕高度和宽度，并用这些尺寸来动态设置组件的大小。示例代码包括创建多个不同尺寸的Text组件和调整Image的大小以适应屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 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';

export default class zuojinminrea extends Component {
  //初始化方法 返回组件
  render() {
    return (
      <View style={styles.container}>

          <Text style={{backgroundColor:'red',height:30,width:100}}>text111</Text>
          <Text style={{backgroundColor:'orange',height:40,width:100,alignSelf:'flex-start'}}>text222</Text>
          <Text style={{backgroundColor:'gray',height:50,width:120}}>text333</Text>
          <Text style={{backgroundColor:'blue',height:60,width:130}}>text4445555</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,//铺满



    backgroundColor: 'pink',
      //row 横向 column纵向
      flexDirection :'row',
      //上边距
      marginTop:100,
      //设置主轴对齐方式
      justifyContent:'space-around',
      //侧轴对齐
      alignItems:'center',
      flexWrap:'wrap',


  },


});
/**---------------实例2--------------------**/
 class zuojinminrea1 extends Component {
    //初始化方法 返回组件
    render() {
        return (
            <View style={styles1.container}>

                <Text style={{backgroundColor:'red',height:30,width:30}}>text111</Text>
                <Text style={{backgroundColor:'orange',height:40,width:40,alignSelf:'flex-start'}}>text222</Text>
                <Text style={{backgroundColor:'gray',height:50,width:50}}>text333</Text>
                <Text style={{backgroundColor:'blue',height:60,width:60}}>text4445555</Text>
            </View>
        );
    }
}
const styles1 = StyleSheet.create({
    container:{

        backgroundColor: 'pink',
        //row 横向 column纵向
        flexDirection :'column',
        //上边距
        marginTop:100,
        //设置主轴对齐方式
        justifyContent:'space-around',
        //侧轴对齐
        alignItems:'center',
        flexWrap:'wrap'
    },

});
/**---------------实例2--------------------**/
var Screen = require('Dimensions')
var viewH = Screen.get('window').height
var  viewW = Screen.get('window').width

class zuojinminrea2 extends Component {
    //初始化方法 返回组件
    render() {
        return (
            <View style={styles2.container}>
            <Text style={{height:viewH/7,width:viewW/5,backgroundColor:'gray'}}>屏幕高度===={viewH}{Screen.get('window').height}</Text>
                <Text style={{height:viewH/8,width:viewW/4,backgroundColor:'red'}}>屏幕宽度===={Screen.get('window').width}</Text>
                <Text style={{height:viewH/9,width:viewW/6,backgroundColor:'orange'}}>屏幕宽度11111===={Screen.get('window').width}</Text>
<Image source={require('./img/baobao.jpg')} style={{height:260,width:260,resizeMode:Image.resizeMode.contain}}>
    <Text>宋宝宝</Text>
</Image>
           {/* cover 图片居中显示 stretch 图片拉伸变xing contain//等比例 */}
                <Image  style={{height:100,width:100,resizeMode:Image.resizeMode.contain}}
                        source={{uri: 'http://avatar.youkuaiyun.com/6/F/B/1_zuojinmin.jpg'}}>
                    <Text style={{marginTop:20,backgroundColor:'transparent'}}>dasda</Text>
                </Image>
            </View>

        );
    }
}
const styles2 = StyleSheet.create({
    container:{
  // flex :1,
        height:viewH,
        backgroundColor: 'pink',
        //row 横向 column纵向
        flexDirection :'column',
        //上边距
        marginTop:20,
        //设置主轴对齐方式
        justifyContent:'space-around',
        //侧轴对齐
        alignItems:'center',
        // flexWrap:'wrap'
    },

});

AppRegistry.registerComponent('zuojinminrea', () => zuojinminrea2);