RN设置Image图片固定在底部位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了RN设置Image图片固定在底部位置相关的知识，希望对你有一定的参考价值。
react-native中（有输入框），当点击输入框，弹出软键盘的时候，我底部的这个图片不会随着一起挤上去，（简单理解就是Image图片在软键盘的下方部位）
用这个属性可以固定图片、文字等任何东西，不会随着屏幕移动而移动。
不懂再追问追问
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图片固定在底部位置的主要内容，如果未能解决你的问题，请参考以下文章