From a6fb776fe06c5d4323b04428928bf5c4ed627864 Mon Sep 17 00:00:00 2001 From: xiewei888 Date: Wed, 13 Mar 2024 11:30:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I97U0Y]=20=E6=B7=BB=E5=8A=A0=20?= =?UTF-8?q?react-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..20cb8e70 --- /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-fit-image三方库依赖react native中Image组件，在Image组件中找不到`orginalWidth`与`orginalHeight`，但在React Native 0.50版本以后，这些属性不建议使用，取而代之的是，您可以使用`style`属性里面设置宽高 https://www.reactnative.cn/docs/next/image#testid； +2. 在react-native-fit-image三方库中`onError`.`onLoadEnd`.`onLoadStart`.`onLayout`回调方法，在原库文档（react-native-fit-image）作者已说明并没有适配，有待开发[issues#76](https://github.com/huiseoul/react-native-fit-image/issues/76) + + + +## 其他 \ No newline at end of file -- Gitee From 590e91a4fd5ea84429fc328e79c60b39ae7db9cb Mon Sep 17 00:00:00 2001 From: xiewei888 Date: Wed, 13 Mar 2024 11:30:05 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I97U0Y]=20=E6=B7=BB=E5=8A=A0=20?= =?UTF-8?q?react-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 | 136 +++++++++++++++++++++------------ 1 file changed, 88 insertions(+), 48 deletions(-) diff --git a/1224/react-native-fit-Image.md b/1224/react-native-fit-Image.md index 20cb8e70..cd4494b5 100644 --- a/1224/react-native-fit-Image.md +++ b/1224/react-native-fit-Image.md @@ -37,7 +37,7 @@ yarn add react-native-fit-image@1.5.5 下面的代码展示了这个库的基本使用场景： ```tsx -import React,{useState} from 'react' +import React,{useState,useEffect} from 'react' import {View,StyleSheet,Text,ScrollView,SafeAreaView,Image,Button} from "react-native" import FitImage from "react-native-fit-image" var styles = StyleSheet.create({ @@ -54,13 +54,30 @@ var styles = StyleSheet.create({ const FitImageDemo=()=>{ // 测试onLoad const [onLoadDatea,setOnLoad] = useState('初始onLoad值111') - // 获取图片尺寸 - const [imgSizeNum,getImageSizeNum] = useState(0) + // 测试onError + const [onErrorDatea,setOnError] = useState('初始onError值111') + // 测试onLoadStart + const [onLoadStartDatea,setOnLoadStart] = useState('未执行前onLoadStart值111') + // 测试onLoadEnd + const [onLoadEndDatea,setOnLoadEnd] = useState('未执行前onLoadEnd值111') + // 获取本地图片尺寸 + const [imgSizeNum,getImageSizeNum] = useState({width:0,height:0}) const img1 = require('./assets/expo.png') const getImageSize = ()=>{ let res = Image.resolveAssetSource(img1) - getImageSizeNum(res.width) + getImageSizeNum({width:res.width,height:res.height}) } + // 获取网略图片尺寸 + const imgHttp={uri:"https://octodex.github.com/images/stormtroopocat.jpg"} + const [imgHttpSize,getHttpSizeNum] = useState({width:0,height:0}) + useEffect(() => {; + // http远程文件 + Image.getSize(imgHttp.uri, (width,height) => { + getHttpSizeNum({ width,height }); + }, + (failure) => { console.log('failure', failure)}); + // base64文件 + }, []); return ( @@ -71,19 +88,33 @@ const FitImageDemo=()=>{ - 获取图片宽度 + 获取本地图片宽高 - 宽度：{imgSizeNum} + 宽度：{imgSizeNum.width},高度：{imgSizeNum.height} - 验证图片圆角 + 验证网略图片宽高 + 宽度：{imgHttpSize.width},高度：{imgHttpSize.height} + source={{uri:"https://octodex.github.com/images/stormtroopocat.jpg"}}> + + + + 验证图片圆角 + + + + + indicator(加载器 为true) indicatorClor(加载器颜色) indicatorSize(值：large small number) + + + + + 测试resizeMode(cover contain stretch repeat center)，值为cover + - 宽度：{imgSizeNum} - 测试resizeMode(cover contain stretch repeat center)，值为cover @@ -113,49 +144,56 @@ const FitImageDemo=()=>{ 第一个测试onLoad {onLoadDatea} - {setTimeout(()=>{setOnLoad('改变后onLoad值222')},2000)}} - style={styles.fitImageWithSize} - source={require('./assets/expo.png')}> + {setTimeout(()=>{setOnLoad('改变后onLoad值222')},2000)}} style={styles.fitImageWithSize} source={require('./assets/expo.png')}> - 第五个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large)) =====》indicator值为true，indicatorSize值为large 网络图片 - + 第二个测试onError + {onErrorDatea} + {setTimeout(()=>{setOnError('改变后onError值222')},2000)}} + style={styles.fitImageWithSize} source={{uri:'https://ok.gitHub.io123.png'}}> + - 第六个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large | number)) =====》indicator值为true，indicatorSize值为small + 第三个测试onLoadStart + {onLoadStartDatea} + {setTimeout(()=>{setOnLoadStart('执行后onLoadStart值222')},2000)}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')}> + + + + 第四个测试onLoadEnd + {onLoadEndDatea} + {setTimeout(()=>{setOnLoadEnd('执行后onLoadEnd值222')},2000)}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')}> + + + + 第五个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)， + indicatorSize(加载器大小(small | large)) 测试网络图片 - 第七个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large | number)) =====》indicator值为true，indicatorSize值为number + 第六个测试属性originalWidth，originalHeight（在不加宽度高度的情况下） - 第八个测试属性indicator(加载器 true/false)，indicatorColor(加载器颜色)，indicatorSize(加载器大小(small | large | number)) =====》indicator值为false，indicatorSize值为number - 为false预加载器不显示 + 第七个测试属性originalWidth，originalHeight（在加宽度高度的情况下） @@ -187,20 +225,21 @@ export default FitImageDemo; ## 属性 -| 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 | +| 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 | NO | 此属性在HarmonyOS，Android ，IOS均不生效 | +| `indicator` | 加载器值为true/false (默认true) | boolean | No | Android IOS | YES | | +| `indicatorColor` | 加载器颜色 | 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 | iOS属性center不生效 | +| 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 | | +| getSize | 获取网略图片尺寸：Image.getSize(uri,(width,height)=>{},(fail)=>{}) | Function | No | Android IOS | YES | | @@ -208,6 +247,7 @@ export default FitImageDemo; 1. 其中在React Native官网文档中，找不到`orginalWidth`与`orginalHeight`这两个属性，由于它们已被废弃，这些属性最初是用于`Image`组件中制定图像的原始高度与宽度，由于react-native-fit-image三方库依赖react native中Image组件，在Image组件中找不到`orginalWidth`与`orginalHeight`，但在React Native 0.50版本以后，这些属性不建议使用，取而代之的是，您可以使用`style`属性里面设置宽高 https://www.reactnative.cn/docs/next/image#testid； 2. 在react-native-fit-image三方库中`onError`.`onLoadEnd`.`onLoadStart`.`onLayout`回调方法，在原库文档（react-native-fit-image）作者已说明并没有适配，有待开发[issues#76](https://github.com/huiseoul/react-native-fit-image/issues/76) +3. `borderRadius`图片圆角属性，在鸿蒙，ios，安卓均不支持 -- Gitee