当前位置: 首页 > news >正文

【React Native】原生组件

原生组件介绍

在 rn 中,View,Text,并不是HTML里的标签。它们都是原生组件,而且正因为是原生组件,所以在 安卓和 IOS 的显示不尽相同。

StatusBar,它是用来控制显示屏幕顶部的电量、网络信息的。

View,可以当成HTML里的div来用,也就是用来布局页面用的。可以用它来包住其他的一些组件。但是View不提供滚动,如果内容超出屏幕范围,就没法显示出来了。

我们现在做一些尝试。在View的下面,再增加一个View。

return里,只返回了一个元素。如果返回了 <></>,叫做Fragments(/ˈfræɡmənts/),翻译成中文是分段、片段的意思。Fragments,并不是一个视图,也不能给它添加任何样式。利用它,可以在不添加额外节点的情况下,将子元素组合起来,就像它根本不存在一样。

但是,如果不使用空节点,而是使用一个 <View></View> 在最外层进行包裹,页面则会空白。

在这里插入图片描述

我的APP为白屏:

在这里插入图片描述

在最外层的View上没有任何样式,连宽和高都没有,所以没法显示出来。然后给最外层加一个样式,页面就可以正常展示:

export default function App() {return (<View style={styles.wrapper}><View style={styles.container}><Text>一个 expo 项目!</Text></View><View style={styles.container}><Text>一行文字</Text> </View></View>);
}const styles = StyleSheet.create({wrapper: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},container: {flex: 1,backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},
});

在这里插入图片描述

Text组件,里面是用来放文字内容的。和小程序的Text组件很像,但是他们有一些区别:

  • 当你在小程序中,写了一段文字。没有用Text组件包裹,它是可以正常显示。
  • 而在React Native中,这样做 100% 报错,它这里的文字内容必须放在Text组件里。

我们可以在新增的View里,添加上一点文字内容:

http://www.dtcms.com/a/274211.html

相关文章:

  • Dify 1.5.0,1.5.1,1.6.0 新特性
  • 小旺AI截图×英特尔强强联合:AIPC生态开启智能生产力新纪元
  • C++设计秘籍:为什么所有参数都需类型转换时,非成员函数才是王道?
  • 基于强化学习的智能推荐系统优化实践
  • 继续Java的jpackage模块打包Linux可执行程序(包含第三方非模块化包)
  • 4G Cat.1 时代,如何选对 DTU?
  • IoC 是如何为 Spring 的其他核心功能(如 AOP、事务管理)提供基础支持的
  • openpilot:为您的汽车插上智能驾驶的翅膀
  • CV目标检测中的LetterBox操作
  • Swift 解 LeetCode 324:一步步实现摆动排序 II,掌握数组重排的节奏感
  • 使用自然语言体验对话式MySQL数据库运维
  • Claude Code:完爆 Cursor 的编程体验
  • UI前端大数据处理新趋势:基于边缘计算的数据处理与响应
  • 炎热工厂救援:算法打造安全壁垒
  • 对S32K144做的BMS安装快速开发Simulink库及BMS例程介绍
  • 【SpringBoot】 整合MyBatis+Postgresql
  • ROS1学习第三弹
  • uniApp实战五:自定义组件实现便捷选择
  • MyBatis缓存穿透深度解析:从原理到实战解决方案
  • Selenium 自动化实战技巧【selenium】
  • frame 与新窗口切换操作【selenium 】
  • 【JMeter】调试方法
  • Conda 安装与配置详解及常见问题解决
  • 从代码学习深度强化学习 - PPO PyTorch版
  • 番外-linux系统运行.net framework 4.0的项目
  • 《Java EE与中间件》实验三 基于Spring Boot框架的购物车
  • 【flutter】flutter网易云信令 + im + 声网rtm从0实现通话视频文字聊天的踩坑
  • 如何蒸馏 设计 中文nl2sql 数据集,进行grpo强化学习 训练qwen3-8b,可以提升大模型nl2sql的能力,支持300行sql生成
  • Redis 分片集群
  • mysql报错服务没有报告任何错误