diff --git a/1224/react-native-fit-Image.md b/1224/react-native-fit-Image.md index 0d5ea46a6353a91b7b9554b98ab3703cd8268493..7039a0540457e7cdf292dc7e1475dc2416bd60b2 100644 --- a/1224/react-native-fit-Image.md +++ b/1224/react-native-fit-Image.md @@ -76,7 +76,7 @@ const FitImageDemo=()=>{ const [reshUiData,setReshUi] = useState(0) useEffect(() => {; getReloadFres() - }, []); + }, []) const getReloadFres =()=>{ // http远程文件 Image.getSize(imgHttp.uri, (width,height) => { @@ -97,6 +97,7 @@ const FitImageDemo=()=>{ {/* button刷新按钮方便压力测试 */} + {refLoadData&&( @@ -281,14 +282,14 @@ export default FitImageDemo; 在以下版本验证通过 -1. RNOH:0.72.13; SDK:HarmonyOS NEXT DP2; IDE:DevEco Studio 4.1.3.700; ROM:2.1.0.72; +1. RNOH:0.72.20;SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.200; ROM:205.0.0.18; ## 属性 | 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) | diff --git a/zh-cn/react-native-fit-Image.md b/zh-cn/react-native-fit-Image.md index 2a2a336e9e0d2afb2756b934c23ae17ca60b1d76..83cc94e721d9f548e9b6a8f672b54b25b341f460 100644 --- a/zh-cn/react-native-fit-Image.md +++ b/zh-cn/react-native-fit-Image.md @@ -9,6 +9,9 @@

+ + + > [!TIP] [Github 地址](https://github.com/huiseoul/react-native-fit-image) ## 安装与使用 @@ -34,372 +37,244 @@ 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"; +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%", - }, + 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 && ( - - 加载中。。。。。。 - - )} - - - ); -}; +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; ``` @@ -407,34 +282,40 @@ export default FitImageDemo; 在以下版本验证通过 -1. RNOH:0.72.13; SDK:HarmonyOS NEXT DP2; IDE:DevEco Studio 4.1.3.700; ROM:2.1.0.72; +1. RNOH:0.72.20;SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.200; ROM:205.0.0.18; + +| 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 | | + + + + -## 属性 -| 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 | | -| `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) + + ## 其他