基礎篇章：React Native之 Image 的講解

阿新 • • 發佈：2022-04-28

（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

今天一起來學習一些Image這個元件，它其實就是相當於我們android控制元件中的ImageView。

我們先看例子，看看載入本地圖片和遠端伺服器圖片的方式，其實差不多。

import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';

class DisplayAnImage extends Component {
  render() {
    return (
      <View>
        <Image
          source={require('./img/favicon.png')}
        />
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
}

第一個就是直接在source裡寫相對路徑，第二個就是直接寫圖片的伺服器地址即可。

當然它也支援在android中顯示GIF 和 WebP 圖片，方式如下：

在android/app/build.gradle中依賴下列開源庫 dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14) compile 'com.facebook.fresco:animated-base-support:0.11.0' // For animated GIF support compile 'com.facebook.fresco:animated-gif:0.11.0' // For WebP support, including animated WebP compile 'com.facebook.fresco:animated-webp:0.11.0' compile 'com.facebook.fresco:webpsupport:0.11.0' // For WebP support, without animations compile 'com.facebook.fresco:webpsupport:0.11.0' }

在proguard-rules.pro中配置防混淆 -keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }

屬性

onLayout function 佈局發生變化時呼叫，引數為：{nativeEvent: {layout: {x, y, width, height}}}.

onLoad function 圖片載入成功時回撥該方法。
onLoadEnd function 載入結束後，不管成功與否，都回調該方法。
onLoadStart function 顧名思義，載入開始時呼叫。
resizeMode enum('cover', 'contain', 'stretch') 決定當元件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。
source {uri: string} uri是一個表示圖片的資源標識的字串，它可以是一個http地址或是一個本地檔案路徑（使用require(相對路徑)來引用）。

Image的style

backfaceVisibility ['visible', 'hidden'] 隱藏或者顯示
backgroundColor color 背景色
borderBottomLeftRadius 左下角圓角大小
borderBottomRightRadius
borderColor color 邊框顏色
borderRadius 邊框圓角
borderTopLeftRadius
borderTopRightRadius
borderWidth number 邊框寬度
opacity 設定透明度
overflow ['visible', 'hidden'] 設定圖片尺寸超過容器可以設定顯示或者隱藏
resizeMode 圖片調整模式
tintColor color 顏色設定
overlayColor 當圖片圓角顯示時，剩餘空間設定的顏色，android獨有

例子實踐

看看我模仿的QQ上的一個頁面，漂不漂亮？說實話，敲程式碼這個東西，還得實踐，看看這個效果，通過這幾篇簡單的學習，你能實現嗎？

效果圖

例子程式碼

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

class ImageDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
         <View style={styles.title_view}>
         <Text style={styles.title_text}>
               空間動態
         </Text>
        </View>
        <View style={styles.three_image_view}>
         <View style={styles.vertical_view}>
              <Image source={require('./img/igs.png')} style={{alignSelf:'center',width:45,height:45}} />
              <Text style={styles.top_text}>
                好友動態
              </Text>
         </View>
          <View style={styles.vertical_view}>
              <Image source={require('./img/eqc.png')} style={{alignSelf:'center',width:45,height:45}}/>
              <Text style={styles.top_text}>
                附近
              </Text>
         </View>
          <View style={styles.vertical_view}>
              <Image source={require('./img/iei.png')} style={{alignSelf:'center',width:45,height:45}}/>
              <Text style={styles.top_text} >
                興趣部落
              </Text>
         </View>
        </View>
        <View style={{height:30,backgroundColor:'#f9f9fb'}}/>
        <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                羽毛球
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                火車票
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                視訊
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
    flex: 1,
    backgroundColor: 'white',
  },
   title_view:{
    flexDirection:'row',
    height:50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
   title_text:{
    color:'white',
    fontSize:20,
    textAlign:'center'
  },
  three_image_view:{
    paddingTop: 15,
    flexDirection:'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor:'white',
  },
  vertical_view:{
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'white',
    paddingBottom:15,
  },
   top_text:{
    marginTop:5,
    color:'black',
    fontSize:16,
    textAlign:'center'
  },
  rectangle_view:{
    paddingTop:8,
    paddingBottom:8,
    paddingLeft:15,
    paddingRight:15,
    flexDirection:'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor:'white',  
    borderBottomColor:'#dedfe0',
    borderBottomWidth:1,
  },
  rectangle_text:{
    color:'black',
    fontSize:16,
    textAlign:'center',
    paddingLeft:8,
  },

});

AppRegistry.registerComponent('ImageDemo', () => ImageDemo);

最後我想說，不懂的可以留言，或者去我的微信公眾號下面留言，評論，一起交流學習。我的微信公眾號：非著名程式設計師。