From 46625aa07ab9f7ee9fa25d9680c2833e4a93054b Mon Sep 17 00:00:00 2001 From: xiewei888 Date: Tue, 12 Mar 2024 15:21:53 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I97U0Y]=20=E6=B7=BB=E5=8A=A0=20reac?= =?UTF-8?q?t-native-fit-image=20=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-fit-Image.md | 214 +++++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 1224/react-native-fit-Image.md diff --git a/1224/react-native-fit-Image.md b/1224/react-native-fit-Image.md new file mode 100644 index 00000000..5f212956 --- /dev/null +++ b/1224/react-native-fit-Image.md @@ -0,0 +1,214 @@ +模板版本：v0.1.3 + +

+

react-native-fit-image

+

+

+ + License + +

+ + + + +> [!TIP] [Github 地址](https://github.com/huiseoul/react-native-fit-image) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-fit-image@1.5.5 +``` + +#### **yarn** + +```bash +yarn add react-native-fit-image@1.5.5 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```tsx +import React,{useState} from 'react' +import {View,StyleSheet,Text,ScrollView,SafeAreaView,Image,Button} from "react-native" +import FitImage from "react-native-fit-image" +var styles = StyleSheet.create({ + fitImage:{ + borderRadius:20, + borderColor:'red', + borderWidth:1 + }, + fitImageWithSize:{ + height:200, + width:'100%' + } +}); +const FitImageDemo=()=>{ + // 测试onLoad + const [onLoadDatea,setOnLoad] = useState('初始onLoad值111') + // 获取图片尺寸 + const [imgSizeNum,getImageSizeNum] = useState(0) + const img1 = require('./assets/expo.png') + const getImageSize = ()=>{ + let res = Image.resolveAssetSource(img1) + getImageSizeNum(res.width) + } + return ( + + + + 验证网略图片 + + + + + 获取图片宽度 + + + 宽度：{imgSizeNum} + + + + 验证图片圆角 + + + 宽度：{imgSizeNum} + + + + 测试resizeMode(cover contain stretch repeat center)，值为cover + + + + + 测试resizeMode(cover contain stretch repeat center)，值为contain + + + + + 测试resizeMode(cover contain stretch repeat center)，值为stretch + + + + + 测试resizeMode(cover contain stretch repeat center)，值为repeat + + + + + 测试resizeMode(cover contain stretch repeat center)，值为center + + + + + 第一个测试onLoad + {onLoadDatea} + {setTimeout(()=>{setOnLoad('改变后onLoad值222')},2000)}} + style={styles.fitImageWithSize} + source={require('./assets/expo.png')}> + + + + 第五个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large)) =====》indicator值为true，indicatorSize值为large 网络图片 + + + + 第六个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large | number)) =====》indicator值为true，indicatorSize值为small + + + + 第七个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large | number)) =====》indicator值为true，indicatorSize值为number + + + + 第八个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large | number)) =====》indicator值为false，indicatorSize值为number + 为false预加载器不显示 + + + + 不加宽高，看图片是否能出来 + + + + 测试blurRadius(模糊滤镜，值越大越模糊) + + + + + ) +} +export default FitImageDemo; +``` + +## 兼容性 + +在以下版本验证通过 + +1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：204.1.0.59; + +## 属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------------- | -------- | ----------- | ----------------- | +| `style` | 图片宽(width)高(height)，边框等样式 | object | yes | Android IOS | YES | +| `source` | 图片文件源： 本地图片 source={require('./assets/expo.png')}；
网略图片 source={{uri:"https://octodex.github.com/images/stormtroopocat.jpg"}} | string | yes | Android IOS | YES | +| `width` | 图片style中属性 | number | yes | Android IOS | YES | +| `height` | 图片style中属性 | number | yes | Android IOS | YES | +| `borderRadius` | 图片样式（圆角） | number | No | Android IOS | | +| `indicator` | 加载器值为true/false (默认true) | boolean | No | Android IOS | YES | +| `onProgress` | 加载器颜色 | string | No | Android IOS | YES | +| `indicatorSize` | 加载器大小 值：`large` `small` number(例: indicatorSize={20} ) | string/number | No | Android IOS | YES | +| resizeMode | 图片布局 值(cover contain stretch repeat center) `cover`: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。**译注**：这样图片完全覆盖甚至超出容器，容器中不留任何空白。 `contain`: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。**译注**：这样图片完全被包裹在容器中，容器中可能留有空白。 `stretch`: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。 `repeat`: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。 `center`: 居中不拉伸。 | string | No | Android IOS | YES | +| blurRadius | 图片模糊滤镜（值越大越模糊） | number | No | Android IOS | YES | +| onLoad | 图片加载成功回调 | Function | No | Android IOS | YES | +| resolveAssetSource | 获取本地图片宽高 用法：const img1 = require('./assets/expo.png') let res = Image.resolveAssetSource(img1) | Function | No | Android IOS | YES | + + + +## 遗留问题 + +1. 其中在React Native官网文档中，找不到`orginalWidth`与`orginalHeight`这两个属性，由于它们已被废弃，这些属性最初是用于`Image`组件中制定图像的原始高度与宽度，但在React Native 0.50版本以后，这些属性不建议使用，取而代之的是，您可以使用`style`属性里面设置宽高； +2. 在react-native-fit-image三方库中`onError`.`onLoadEnd`.`onLoadStart`.`onLayout`回调方法，在原库文档（react-native-fit-image）作者已说明并没有适配，有待开发 + + + +## 其他 \ No newline at end of file -- Gitee