前言

北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。

最近开始写React Native 项目, app有很多图片展示的地方， 比如广告位的图片，不能使其变形

Image 组件的使用--基础

1 style 样式 source 图片url

const styles = StyleSheet.create({
  logo: {
    width: 66,
    height: 58,
  },
});
// 行内图片样式
 <Image
  style={{
            width: '100%',
            height: '100%'),
          }}
          source={require('@expo/snack-static/react-native-logo.png')} />
 // 定义样式
 <Image
         style={styles.logo}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
      

2 props

1 resizeMode：当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。默认值是cover

• cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。

• contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。

• stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

• repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。

• center: 居中不拉伸。 2 onLayout

onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}

方法

getSize()

Image.getSize(uri, success, [failure]);

• uri 图片地址
• success 成功的回调函数，返回图片的宽高数据 failure 失败的回调函数 prefetch 此静态函数prefect 来预下载某张网络图片

let imageSource= ``"http://www.hangge.com/blog/images/logo.png"``;
Image.prefetch(imageSource).then((result) => {
//当预下载成功时，返回值result是true``}). catch((error) => {
        //预下载图片失败   
console.log(error);``});`

图片等比例放大

  <Image
          style={{
            width: '100%',
            height: Math.floor(((屏幕宽度) * 图片高度) / 图片宽度),
          }}
          source={{ uri: data?.imageUrl }} />

屏幕宽度获取方法

get Width() {
    return Math.min(Dimensions.get('screen').width, Dimensions.get('screen').height)
  }

 get Height() {
    return Math.max(Dimensions.get('screen').width, Dimensions.get('screen').height)
  }

图片宽度 高度 可以根据图片的url去获取

Image.getSize(uri, success, [failure]);