在 react-native 中使用图片

参考官网

一、 在组件中使用图片

1. 通过 Image 组件的 source 属性可加载静态图片、网络图片、base64 格式图片
   可通过 style 属性定义图片样式

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

const App = () => {
  return (
    <View style={[styles.container]}>
      {/* 使用本地图片 */}
      <Image style={[styles.img]} source={require('./images/demo.png')} />

      {/* 使用网络图片 */}
      <Image
        style={[styles.img]}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

      {/* 使用 base64 图片 */}
      <Image
        style={[styles.img]}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#666',
    justifyContent: 'center',
    alignItems: 'center',
  },
  img: {
    height: 80,
    width: 80,
    borderRadius: 0.8,
  },
});
export default App;

2. 注意事项
   默认情况下 Android 是不支持 GIF 和 WebP 格式的。需要在 android/app/build.gradle 文件中根据需要手动添加以下模块

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // 如果你需要支持GIF动图
  implementation 'com.facebook.fresco:animated-gif:2.5.0'

  // 如果你需要支持WebP格式，包括WebP动图
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // 如果只需要支持WebP格式而不需要动图
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

二、 Image 组件的其他常见属性

1. blurRadius 模糊半径：为图片添加一个指定半径的模糊滤镜。

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

const App = () => {
  return (
    <View>
      <Image
        blurRadius={2}
        style={[styles.img]}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  img: {
    height: 80,
    width: 80,
    borderRadius: 0.8,
  },
});
export default App;

2. defaultSource 图片占位：在读取图片时默认显示的图片。
   注意：在 Android 的 debug 版本上本属性不会生效（但在 release 版本中会生效）

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

const App = () => {
  return (
    <View>
      <Image
        style={[styles.img]}
        defaultSource={{
          uri: './images/demo.png',
        }}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  img: {
    height: 80,
    width: 80,
    borderRadius: 0.8,
  },
});
export default App;

3. 图片事件

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

const App = () => {
  return (
    <View>
      <Image
        style={[styles.img]}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
        onLoad={() => {
          console.log('加载成功完成时调用此回调函数');
        }}
        onError={() => {
          console.log('当加载错误的时候调用此回调函数');
        }}
        onLoadStart={() => {
          console.log('加载开始时调用');
        }}
        onLoadEnd={() => {
          console.log('加载结束后，不论成功还是失败，调用此回调函数');
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  img: {
    height: 80,
    width: 80,
    borderRadius: 0.8,
  },
});
export default App;

三、 背景图片

在 react-native 中没有 backgroundImage 这个属性，所以无法通过style设置背景图片，需要通过 ImageBackground 组件实现背景图片

import React from 'react';
import {StyleSheet, Text, View, ImageBackground} from 'react-native';
const App = () => {
  return (
    <ImageBackground
      style={styles.container}
      resizeMode="cover"
      source={require('./images/demo.png')}>
      <View style={styles.titleWrapper}>
        <Text style={styles.title}>hello world</Text>
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  titleWrapper: {
    flex: 0.2,
    backgroundColor: 'rgba(120,14,20,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 28,
    color: '#fff',
  },
});

export default App;