React Native 加载图片

最新推荐文章于 2025-06-03 18:58:44 发布

weixin_34099526

最新推荐文章于 2025-06-03 18:58:44 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a30f709f265da433562c1ae

本文介绍了一个使用React Native进行图片展示的应用实例。通过导入必要的组件并利用Dimensions获取屏幕尺寸，确保了图片能适配不同设备的屏幕大小。同时，本文展示了如何设置样式以实现良好的视觉效果。

效果图如下

import React, { Component } from 'react';

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

/*获得屏幕的宽和高需要导入的Dimensions包*/
var Dimensions = require('Dimensions');

export default class HelloWorldApp extends Component {
    render() {
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <View style={styles.container}>
              <Image source={pic} style={styles.picStyle}/>
              <Text style={styles.helloTextStyle}>Hello</Text>
            </View>

        );
    }
}
/*获得屏幕宽度*/
let Screen_width = Dimensions.get('window').width;

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    picStyle: {
      width:Screen_width,
        height:3*Screen_width/4.0,
    },

    helloTextStyle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});
复制代码