React Native预设占位placeholder的使用_网络技术_宿州市腾雀网络科技有限公司

React Native预设占位placeholder的使用

发布时间 - 2026-01-11 03:27:10 点击率：次

当我们首次打开一个app的时候会请求接口获取数据，那么获取数据的这段时间展示什么给用户呢？国内很多app都是千篇一律的用一个菊花代替（俗称loading），或者更有心一点的做一个好看一点的loading，但是这样当拿到数据渲染页面的时候会很生硬的切换，总感觉很low。

facebook首页列表是用一个接近真实布局的骨架动画来代替loading，这东西可以称之为skeleton screen或者placeholder，但是翻译过来真不知道该翻译成什么合适，这么做的好处就是在内容加载完成后可以做到流畅无缝切换真实布局，细节决定产品的质量，我觉得facebook对用户体验，交互的细节做的挺不错。先上一张我的fb截图。

rn-placeholder是rn版本的placeholder，我在次基础上做了对flastlist，listview，SectionList的适配封装。先看一下在我的开源项目中的效果：

看完上面的效果是不是感觉比传统的loading要舒服多了，下面是example：

一：flastlist，listview，SectionList使用demo

 import { ListItem, ListParagraph } from 'components';
 export default class Zi extends Component {
  render() {
   const { loading } = this.props;
   return (
    <ListParagraph
     ParagraphLength={4} // 要渲染的条数
     isLoading={loading} // loading状态
     hasTitle // 是否需要title
     list={this.sectionList} // 这就是SectionList的函数
    />
   );
  }

 }

注：ListParagraph组件目前在我开源项目中，还没有添加到npm，有需要的到我项目中拿，项目地址在文章末尾

二：左图右内容布局

import Placeholder from 'rn-placeholder';
export default class Cheng extends Component {
  render() {
   return <Placeholder.ImageContent
    hasRadius //左边的方块是否需要圆角
    size={60} // 大小
    animate="fade" // 动画方式
    lineNumber={4} // 右边的线显示的数量
    lineSpacing={5} // 行间距的距离
    firstLineWidth=90% // 第一行的宽度
    lastLineWidth="70%" // 最后一行的宽度
    onReady={this.state.isReady} // 内容是否加载完毕，如果加载完毕会切换到你的真实内容布局
   >
    <Text>左图右内容布局</Text>
   </Placeholder.ImageContent>
  }  
 }

三：段落布局

 import Placeholder from 'rn-placeholder';
 export default class Cheng extends Component {
  render() {
   return <Placeholder.Paragraph
    size={60}
    animate="fade"
    lineNumber={4}
    lineSpacing={5}
    lastLineWidth="30%"
    onReady={this.state.isReady}
   >
    <Text>段落布局</Text>
   </Placeholder.Paragraph>
  }  
 }

四：还有Line（行布局），Media（图片布局），使用方法跟三一样。

完美收官！

项目demo地址：https://github.com/duheng/Mozi

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# React # Native # placeholder # 占位 # 详解React Native监听Android回退按键与程序化退出应用 # react.js 父子组件数据绑定实时通讯的示例代码 # React-Native左右联动List的示例代码 # React-Native使用Mobx实现购物车功能 # react-native DatePicker日期选择组件的实现代码 # React Native模块之Permissions权限申请的实例相机 # 加载 # 开源 # 都是 # 左图 # 是在 # 还没有 # 行间 # 我在 # 在我 # 我觉得 # 首次 # 这就是 # 到我 # 这段 # 看完 # 真不 # 做一个 # 当我们 # 这么做 # 会很

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：LINUX远程登录的方法是什么

下一篇：linux vim工作模式是什么

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：LINUX远程登录的方法是什么

下一篇：linux vim工作模式是什么