diff --git a/1224/react-native-fit-Image.md b/1224/react-native-fit-Image.md index d90d6158ecee2e174809c92648b46e85a4e0d3c3..fdbe5b15884cdf1caab2d32ffa2aaca602e97728 100644 --- a/1224/react-native-fit-Image.md +++ b/1224/react-native-fit-Image.md @@ -58,8 +58,10 @@ const FitImageDemo=()=>{ const [onErrorDatea,setOnError] = useState('初始onError未执行') // 测试onLoadStart const [onLoadStartDatea,setOnLoadStart] = useState('未执行前onLoadStart未执行') - // 测试onLoadEnd - const [onLoadEndDatea,setOnLoadEnd] = useState('未执行前onLoadEnd未执行') + // 测试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') @@ -67,9 +69,11 @@ const FitImageDemo=()=>{ 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}) + // 刷新定时器 + var reshUi:any = null useEffect(() => {; // http远程文件 Image.getSize(imgHttp.uri, (width,height) => { @@ -78,175 +82,197 @@ const FitImageDemo=()=>{ (failure) => { console.log('failure', failure)}); // base64文件 }, []); + // 刷新 + const reLoadFun = () =>{ + setRefLoadBtn(false) + if(reshUi) { + clearTimeout(reshUi) + } else { + reshUi = setTimeout(()=>{ + setRefLoadBtn(true) + },1000) + } + } return ( + + {refLoadData&&( + + + 测试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} + {setTimeout(()=>{ + console.log('执行了onError'); + setOnError('执行了onError')},2000)}} + style={styles.fitImageWithSize} source={{uri:'https://ok.gitHub.io123.png'}} /> + + + 测试onLoadStart + {onLoadStartDatea} + {setTimeout(()=>{ + console.log('执行了onLoadStart'); + setOnLoadStart('执行了onLoadStart')},2000)}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> + + + 测试onLayOut + {onLayOutData} + {setTimeout(()=>{ + console.log('执行了onLayout'); + setOnLayout('执行了onLayout')},2000)}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> + + + 测试blurRadius(模糊滤镜，值越大越模糊) + + + + )} + {!refLoadData&&( - - 测试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)，值为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')},2000)}} - style={styles.fitImageWithSize} source={require('./assets/expo.png')} /> - - - 测试onError - {onErrorDatea} - {setTimeout(()=>{setOnError('执行了onError')},2000)}} - style={styles.fitImageWithSize} source={{uri:'https://ok.gitHub.io123.png'}} /> - - - 测试onLoadStart - {onLoadStartDatea} - {setTimeout(()=>{setOnLoadStart('执行了onLoadStart')},2000)}} - style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> - - - 测试onLoadEnd - {onLoadEndDatea} - {setTimeout(()=>{setOnLoadEnd('执行了onLoadEnd')},2000)}} - style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> - - - 测试blurRadius(模糊滤镜，值越大越模糊) - - + + 加载中。。。。。。 + + )} )