React Native 组件之Image

Posted 2020-08-12

Image组件类似于ios中UIImage控件，该组件可以通过多种方式加载图片资源。

 

使用方式，加载方式有如下几种：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 周少停
 * image 加载的三种方式+设置图片的内容模式
 */

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

class Project extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>加载工程中图片</Text>
       <Image source={require(‘./imgs/1111.png‘)} style={{width:120,height:120}}/> 
        <Text>加载Xcode中asset的图片</Text>
       <Image source={require(‘image!520‘)} style={{width:120,height:120}} />
        <Text>加载网络中的图片</Text>
       <Image source={{uri:‘https://unsplash.it/600/400/?random‘}} style={{width:120,height:200}}/>
        <Text>设置加载图片的模式</Text>
        <Image source={{uri:‘https://unsplash.it/600/400/?random‘}} style={{width:120,height:200,resizeMode:Image.resizeMode.cover}}/>
        <Image source={{uri:‘https://unsplash.it/600/400/?random‘}} style={{width:120,height:200,resizeMode:Image.resizeMode.contain}}/>
        <Image source={{uri:‘https://unsplash.it/600/400/?random‘}} style={{width:120,height:200,resizeMode:Image.resizeMode.stretch}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:20,//上边距
    flexDirection:‘column‘,//主轴方向 垂直
    justifyContent: ‘flex-start‘,//控件在主轴上的对齐方向
    alignItems: ‘flex-start‘, //控件在侧轴上的对齐方向
    backgroundColor: ‘#F5FCFF‘,
  }
});

AppRegistry.registerComponent(‘Project‘, () => Project);

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 周少停 2016-09-13
 * Imaage的常见属性
 */

import React, { Component } from ‘react‘;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from ‘react-native‘;
//导入json数据
var BadgeData = require(‘./BadgeData.json‘);

//定义一些全局变量
var Dimensions = require(‘Dimensions‘);
var {width} = Dimensions.get(‘window‘); //屏宽
var cols = 3 //总列数
var boxW = 100; //单个盒子的宽度&高度
var vMargin = (width - cols*boxW)/(cols + 1);//盒子中间的水平间距
var hMargin = 25;
 
class Project extends Component {
  render() {
    return (
      <View style={styles.container}>
       {/*返回包的数据*/}
        {this.renderAllBadge()}
      </View>
    );
  }
  //返回所有的包
  renderAllBadge(){
    //定义一个数组,装每个包的信息
    var allBadge = [];
    //遍历json数据
    for(var i=0;i<BadgeData.data.length;i++){
      //去除单独的数据对象
      var badge = BadgeData.data[i];
      //直接装入数组
      allBadge.push(
        <View key={i} style={styles.outViewStyle}>
            <Image source={{uri:badge.icon}} style={styles.imageStyle} />
            <Text style={styles.mainTitleStyle}>
               {badge.title}
            </Text>
        </View>
      );
    }
    //返回数组
    return allBadge;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:20,//上边距
    flexDirection:‘row‘,//主轴方向,水平
    alignItems:‘flex-start‘,//定义控件在侧轴上的对齐方式
    flexWrap:‘wrap‘,//是否换行
    backgroundColor: ‘#F5FCFF‘
  },
  outViewStyle: {
    backgroundColor:‘gray‘,
    alignItems:‘center‘,
    width:boxW,
    height:boxW,
    marginLeft:vMargin,
    marginBottom:hMargin
  },
  imageStyle:{
    width:80,
    height:80
  },
  mainTitleStyle:{
    color:‘white‘
  }
});

AppRegistry.registerComponent(‘Project‘, () => Project);