From b9645b2695a2c37c7ec05b8d9efa44aa17863887 Mon Sep 17 00:00:00 2001 From: xiewei888 Date: Fri, 19 Apr 2024 16:38:59 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I97U0Y]=20=E4=BF=AE=E6=94=B9=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 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1224/react-native-fit-Image.md b/1224/react-native-fit-Image.md index 60bee43d..afacf18a 100644 --- a/1224/react-native-fit-Image.md +++ b/1224/react-native-fit-Image.md @@ -288,7 +288,7 @@ export default FitImageDemo; | Name | Description | Type | Required | Platform | HarmonyOS Support | 备注 | | ------------------ | ------------------------------------------------------------ | ------------- | -------- | ----------------------------- | ----------------- | ------------------------------------------------------------ | | `style` | 图片宽(width)高(height)，边框等样式 | object | yes | Android IOS | YES | 在不加orginalWidth与orginalHeight属性时，style里面必须设置宽width，高height才能把图片加载出来 | -| `source` | 图片文件源： 本地图片 source={require('./assets/expo.png')}；
网略图片 source={{uri:"https://octodex.github.com/images/stormtroopocat.jpg"}} | string | yes | Android IOS | YES | | +| `source` | 图片文件源： 本地图片 source={require('./assets/expo.png')}；
网络图片 source={{uri:网络图片路径}} | string | yes | Android IOS | YES | | | `width` | 图片style中属性 | number | yes | Android IOS | YES | | | `height` | 图片style中属性 | number | yes | Android IOS | YES | | | `borderRadius` | 图片样式（圆角） | number | No | Android IOS HarmonyOS都不支持 | NO | 此属性在HarmonyOS，Android ，IOS均不生效;[issues](https://github.com/huiseoul/react-native-fit-image/issues/111) | -- Gitee From 69db9e9223bf5d5938563135f5407abf98102700 Mon Sep 17 00:00:00 2001 From: xiewei888 Date: Fri, 19 Apr 2024 18:08:47 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I97U0Y]=20=E4=BF=AE=E6=94=B9=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 --- zh-cn/react-native-fit-Image.md | 322 ++++++++++++++++++++++++++++++++ 1 file changed, 322 insertions(+) create mode 100644 zh-cn/react-native-fit-Image.md diff --git a/zh-cn/react-native-fit-Image.md b/zh-cn/react-native-fit-Image.md new file mode 100644 index 00000000..afacf18a --- /dev/null +++ b/zh-cn/react-native-fit-Image.md @@ -0,0 +1,322 @@ +模板版本：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,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({ + fitImage:{ + borderRadius:20, + borderColor:'red', + borderWidth:1 + }, + fitImageWithSize:{ + height:200, + width:'100%' + } +}); +const FitImageDemo=()=>{ + // 测试onLoad + const [onLoadDatea,setOnLoad] = useState('初始onLoad未执行') + // 测试onError + const [onErrorDatea,setOnError] = useState('初始onError未执行') + // 测试onLoadStart + const [onLoadStartDatea,setOnLoadStart] = useState('未执行前onLoadStart未执行') + // 测试onLayOut + const [onLayOutData,setOnLayout] = useState('未执行前onLayout未执行') + // 刷新按钮 + const [refLoadData,setRefLoadBtn] = useState(true) + // 获取本地图片尺寸 + const [imgSizeNum,getImageSizeNum] = useState({width:0,height:0}) + const img1 = require('./assets/expo.png') + const getImageSize = ()=>{ + let res = Image.resolveAssetSource(img1) + 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}) + // 刷新 + const [reshUiData,setReshUi] = useState(0) + useEffect(() => {; + getReloadFres() + }, []); + const getReloadFres =()=>{ + // http远程文件 + Image.getSize(imgHttp.uri, (width,height) => { + getHttpSizeNum({ width,height }); + }, + (failure) => { console.log('failure', failure)}); + } + // 刷新 + const reLoadFun = () =>{ + setRefLoadBtn(false) + setReshUi(reshUiData+1) + getImageSizeNum({width:0,height:0}) + getHttpSizeNum({width:0,height:0}) + setRefLoadBtn(true) + getReloadFres() + } + return ( + + + {/* button刷新按钮方便压力测试 */} + + {refLoadData&&( + + 刷新了{reshUiData}次 + + 测试onLoad + {onLoadDatea} + {console.log('执行了onLoad'); setOnLoad('执行了onLoad')}} + style={styles.fitImageWithSize} source={require('./assets/expo.png')} /> + + + 测试base64图片 + + + + 测试属性originalWidth，originalHeight（在不加宽度高度的情况下） + + + + 不加originalWidth，originalHeight和不加宽度高度的情况下 + + + + 不加originalWidth，originalHeight但是加宽度高度的情况下 + + + + 不加originalWidth，originalHeight但是加宽度高度的情况下的网络图片 + + + + 加originalWidth，originalHeight但是不加宽度高度的情况下的网络图片 + + + + 同时加originalWidth，originalHeight和宽度高度的情况下 + + + + + indicator(加载器 为true) indicatorColor(加载器颜色) indicatorSize(值：large small number) + 值为：large + + + + indicator(加载器 为true) indicatorColor(加载器颜色) indicatorSize(值：large small number) + small + + + + indicator(加载器 为true) indicatorColor(加载器颜色) indicatorSize(值：large small number) + number:值越大指示器越大 + + + + indicator(加载器 为false) + number:值越大指示器越大 + + + + + 验证网络图片 + + + + 获取本地图片宽高 + + 宽度：{imgSizeNum.width},高度：{imgSizeNum.height} + + + + 验证网络图片宽高 + 宽度：{imgHttpSize.width},高度：{imgHttpSize.height} + + + + 验证图片圆角 + + + + 测试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 + + + + + 测试onError + {onErrorDatea} + {console.log('执行了onError'); setOnError('执行了onError')}} + style={styles.fitImageWithSize} source={{uri:'https://ok.gitHub.io123.png'}} /> + + + 测试onLoadStart + {onLoadStartDatea} + {console.log('执行了onLoadStart');setOnLoadStart('执行了onLoadStart')}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> + + + 测试onLayOut + {onLayOutData} + {console.log('执行了onLayout');setOnLayout('执行了onLayout')}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> + + + 测试blurRadius(模糊滤镜，值越大越模糊) + + + + )} + {!refLoadData&&( + + + 加载中。。。。。。 + + + )} + + + ) +} +export default FitImageDemo; +``` + +## 兼容性 + +在以下版本验证通过 + +1. RNOH：0.72.5; SDK：HarmonyOS NEXT DP2; IDE：DevEco Studio 4.1.3.700; ROM：204.1.0.72(SP2DEVC00E72R1P1); + +## 属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | 备注 | +| ------------------ | ------------------------------------------------------------ | ------------- | -------- | ----------------------------- | ----------------- | ------------------------------------------------------------ | +| `style` | 图片宽(width)高(height)，边框等样式 | object | yes | Android IOS | YES | 在不加orginalWidth与orginalHeight属性时，style里面必须设置宽width，高height才能把图片加载出来 | +| `source` | 图片文件源： 本地图片 source={require('./assets/expo.png')}；
网络图片 source={{uri:网络图片路径}} | string | yes | Android IOS | YES | | +| `width` | 图片style中属性 | number | yes | Android IOS | YES | | +| `height` | 图片style中属性 | number | yes | Android IOS | YES | | +| `borderRadius` | 图片样式（圆角） | number | No | Android IOS HarmonyOS都不支持 | NO | 此属性在HarmonyOS，Android ，IOS均不生效;[issues](https://github.com/huiseoul/react-native-fit-image/issues/111) | +| `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 | | +| 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 | | +| onError | 获取图片资源出错 | Function | No | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76)；在原库中作者已经说明Some props are not working | +| onLoadStart | 资源刚加载时候 | Function | NO | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76)；在原库中作者已经说明Some props are not working | +| onLayout | 资源改变尺寸或者加载时 | Function | NO | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76)；在原库中作者已经说明Some props are not working | +| orginalWidth | 图片原始宽度 | number | NO | Android IOS | YES | | +| orginalHeight | 图片原始高度 | number | NO | Android IOS | YES | | + + + + + + + +## 原库已知问题 + +1. 在react-native-fit-image三方库中`onError`.`onLoadStart`.`onLayout`回调方法，在原库文档（react-native-fit-image）作者已说明并没有适配（Some props are not working），有待开发[issues](https://github.com/huiseoul/react-native-fit-image/issues/76) +2. `borderRadius`图片圆角属性，在鸿蒙，ios，安卓均不支持，官方文档互动有提到borderRadius不生效;[issues](https://github.com/huiseoul/react-native-fit-image/issues/111) + + + +## 其他 \ No newline at end of file -- Gitee