RN设置Image图片固定在底部位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了RN设置Image图片固定在底部位置相关的知识,希望对你有一定的参考价值。

react-native中(有输入框),当点击输入框,弹出软键盘的时候,我底部的这个图片不会随着一起挤上去,(简单理解就是Image图片在软键盘的下方部位)

参考技术A position: fixed;
用这个属性可以固定图片、文字等任何东西,不会随着屏幕移动而移动。
不懂再追问追问

react-native中position定位没有fixed这个属性。

追答

那我也不知道咯,你再问问吧。我没用过react-native

图片懒加载和预加载

懒加载实际上就是通过计算图片的到可视区窗口的距离,如果图片的顶部到可视区窗口的底部的距离小于等于0的话,就生成一个image并设置image.src的属性值,放置到相应的图片位置

从而实现懒加载,即动态的创建image和添加image元素到页面。

预加载:要实现已进入页面就将图片下载,直接在script中创建imgae数组,循环的将图片的地址信息传递给各个image元素的src特性即可

懒加载实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        ul
            margin-left: 50%;
            position: relative;
            left: -100px;
            width: 200px;
            height: 200px;
            background-color: gold;
            overflow: auto;
            list-style: none;
            padding: 0px;
        
        li
            width: 100px;
            height: 100px;
            background-color:green;
            margin-bottom: 10px;
        

        img
            width:100px;
            height: 100px;
        
    </style>
    <title>懒加载</title>
</head>
<body>
    <h1>图片懒加载</h1>
    <ul>        
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
    </ul>
    <script>
        // 实质就是动态的生成img 让其动态的加载图片,判断是否是在可视区域内
        
       var ul = document.getElementsByTagName("ul")[0];
       var lis = document.getElementsByTagName("li");
       function check(element)
            //判断是否需要将图片加载进来
            //https://blog.csdn.net/weixin_40929761/article/details/81061434
            //offsetTop距离文档顶端的距离,scrollTop滚过的距离,200 ul的宽度 减去之后就是元素距离ul底部的距离
            //小于0就说明进入了
            if(element.offsetTop-ul.scrollTop-200<=0)
                return true;
            
            else
                return false;
            
        
       document.getElementsByTagName("ul")[0].onscroll = function ()
           for(let i=0;i<lis.length;i++)
                if(check(lis[i]))
                    lis[i].style.backgroundColor = "red";
                    var img = document.createElement("img");
                    img.src = lis[i].dataset.src;
                    lis[i].appendChild(img);
                

           
       
    </script>
</body>
</html>

 

以上是关于RN设置Image图片固定在底部位置的主要内容,如果未能解决你的问题,请参考以下文章

如何在 UI 底部的固定位置设置按钮?

Safari 在底部截断固定图像?

如何设置CSS 让页面头部和底部固定 中间内容滚动?

css 如何设置底部固定

LATEX强制放置表格图片在固定的位置

为啥我的导航栏“位置:固定”显示在网页底部而不是移动设备的视口底部?