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

React Native基础知识点

1、组件

与react编写web应用不同,不是使用div、span等标签。而是使用RN官方提供的组件,如View、Text等组件来搭建页面

2、宽高

React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。默认值为auto

 <View style={{width: 50,height: 50 }}/>


上面创建了一个View组件,它的宽高都是50,那么无论在什么手机上,它显示的大小都是一样的。
宽高还可以使用百分比来设置:

<View style={{width:'20%', height: 50 }} />

注意:百分比用字符串,数值直接写
以及接下来要讲的布局,通过布局来控制宽高,而不再通过widthheight来指定宽高了。

3、样式写法的一些区别

  • 我们可以简单的把View,Text想象为html中的div或span,不同的地方在于css中,我们在一个元素中指定颜色,字体等,那么这个元素内部所有的元素都会继承这个元素的颜色或者字体,而在React Native中文本只能放在Text组件内,也不允许给View组件设置颜色、字体等属性
  • 样式名基本上是遵循了 web 上的 CSS的命名,只是按照JS的语法要求使用了驼峰命名法,例如将background-color改为backgroundColor。
  • style属性可以是一个普通的 JavaScript 对象。这是最简单的用法,因而在示例代码中很常见。你还可以传入一个数组--在数组中位置居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承。

在真实项目中,我们一般会使用StyleSheet.create来创建样式对象

import React from 'react'; 
import {View,Text,StyleSheet} from'react-native';
class App extends React.Component {render(){return(<View style={styles.container}><Text>Hello world</Text></View>);}
}const styles = StyleSheet.create({
container: {backgroundColor: ' red',
}
  • 在React Native的组件 View组件虽然有一系列的触摸处理函数,但是想要监听到用户的操作是点击,还是不方便的。所以React Native提供了一系列的Touchable组件,专门用于处理点击事件。比如: TouchableOpacity, TouchableNativeFeedback,TouchableHighlight等。

这些组件都可以监听到一下的事件:

  • onBlur :失去焦点事件
  • onFocus :得到焦点事件
  • onLayout: 当加载或者布局改变的事件
  • onLongPress :长按事件
  • onPress :触摸操作结束时调用,相当于点击
  • onPressIn :只要按下并调用了touchable元素,就会调用此方法,且是在onPress方法之前调用的
  • onPressOut:触摸释放后立即调用,且是在onPress方法之前调用
  • 最常用的方法无疑是onPress

4、滚动视图
在html中,如果页面内容超过了屏幕展示的高度,浏览器会自动出现滚动条。我们也可以直接给div设置一个固定的高度,再设置overflow:scroll,就可以让div具有滚动效果。但是在React Native中如果我们需要一个滚动效果,我们需要使用一个新的组件 ScrollView或者FlatList。

ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染,哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表,那么应该使用功能差不多但性能更好的FlatList组件。

FlatList组件不仅性能很好,还拥有很多其他的优点支持水平布局模式

  • 行组件显示或隐藏时可配置回调事件
  • 支持单独的头部组件
  • 支持单独的尾部组件
  • 支持自定义行间分隔线
  • 支持下拉刷新
  • 演示模式
  • 支持上拉加载
  • 支持跳转到指定行(ScrollToIndex )
  • 支持多列布局

相关文章:

React Native基础知识点

1、组件 与react编写web应用不同&#xff0c;不是使用div、span等标签。而是使用RN官方提供的组件&#xff0c;如View、Text等组件来搭建页面 2、宽高 React Native 中的尺寸都是无单位的&#xff0c;表示的是与设备像素密度无关的逻辑像素点。默认值为auto <View style{{…...

nginx 平滑升级

背景介绍 因为一些原因&#xff0c;比如说 Nginx 发现漏洞、应用一些新的模块等等&#xff0c;想对 Nginx 的版本进行更新&#xff0c;最简单的做法就是停止当前的 Nginx 服务&#xff0c;然后开启新的 Nginx 服务。但是这样会导致在一段时间内&#xff0c;用户是无法访问服务…...

数据结构——链表OJ题目讲解(2)

作者&#xff1a;几冬雪来 时间&#xff1a;2023年3月10日 内容&#xff1a;数据结构链表OJ题目讲解 来源&#xff1a;牛客网和力扣 目录 前言&#xff1a; 刷题&#xff1a; 1.反转链表&#xff1a; 1.改变指向的解法&#xff1a; 2.取头结点插入到新链表&#xff1a; …...

GitHub上线重量级分布式事务笔记,再也不怕面试官问分布式了

分布式事务就是指事务的参与者、支持事务的服务器、资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上。简单的说&#xff0c;就是一次大的操作由不同的小操作组成&#xff0c;这些小的操作分布在不同的服务器上&#xff0c;且属于不同的应用&#xff0c;分布式…...

C++语法规则1(C++面向对象 )

C面向对象 面向对象的三大特征是继承&#xff0c;多态和封装&#xff0c;C重面向对象重要的就是这些&#xff0c;我们下面通过一些简单的实例加以理解&#xff0c;从这小节开始&#xff0c;我们将开启新的编程旅途。与 C 语言编程的思想完全不同了&#xff0c;这就是 C!理解概…...

Web漏洞-CSRF漏洞

CSRF漏洞介绍&#xff1a;CSRF&#xff08;Cross-Site Request Forgery&#xff09;&#xff0c;中文名称&#xff1a;跨站请求伪造&#xff0c;是一种劫持用户在当前已登录的Web应用程序上执行非本意操作一种攻击.原理&#xff1a;攻击者利用目标用户的身份&#xff0c;执行某…...

Python3-面向对象

Python3 面向对象 Python从设计之初就已经是一门面向对象的语言&#xff0c;正因为如此&#xff0c;在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。 如果你以前没有接触过面向对象的编程语言&#xff0c;那你可能需要先了解一些面向对象…...

拐点!新能源车交付均价首次「低于」燃油车,智能电动成新爆点

2023年开局&#xff0c;随着特斯拉打响新能源汽车市场的「价格战」首炮&#xff0c;除部分燃油车品牌&#xff08;仍依赖自身多年的用户和品牌积累的溢价能力&#xff09;没有跟进之外&#xff0c;几乎所有的新能源车型都在进行车型价格的下调。 而数据也在反映市场的拐点即将来…...

JavaScript String 字符串对象实例合集

文章目录JavaScript String 字符串对象实例合集返回字符串的长度为字符串添加样式返回字符串中指定文本首次出现的位置 - indexOf()方法查找字符串中特定的字符&#xff0c;若找到&#xff0c;则返回该字符 - match() 方法替换字符串中的字符 - replace()JavaScript String 字符…...

实习生培养计划

部门最近入职了实习生&#xff0c;为了更好的帮助实习生完成由学生向职业人的转变&#xff0c;并尽快融入企业稳步成长&#xff0c;现提出实习生培养计划&#xff0c;具体方案如下&#xff1a; 1、方案目的 1、使实习生快速转换角色与心态&#xff0c;适应从校园到企业的坏境…...

【服务器管理】Wordpress服务器内存占用太高(优化方案详解)

简述 在刚刚配置完服务器之后&#xff0c;想着试一试wordpress这个功能&#xff0c;结果打开服务器后台&#xff0c;发现本来就不多的内存被占用了一大半。 我真的服了&#xff0c;我还啥都没干呢&#xff0c;就这么多的内存占用&#xff0c;那之后我开始弄了还得了。因此有必…...

【ECCV 2022】76小时动捕,最大规模数字人多模态数据集开源

随着元宇宙的火爆以及数字人建模技术的商业化&#xff0c;AI 数字人驱动算法&#xff0c;作为数字人动画技术链的下一关键环节&#xff0c;获得了学界和工业界越来越广泛的兴趣和关注。其中谈话动作生成 &#xff08;由声音等控制信号生成肢体和手部动作&#xff09;由于可以降…...

联合解决方案 | 亚信科技AntDB数据库携手浪潮K1 Power赋能关键行业数字化转型,助力新基建

自2022年印发《“十四五”数字经济发展规划》以来&#xff0c;我国数字化发展进入快车道。数据库作为数据存储与计算的基础软件&#xff0c;对筑牢数字经济底座至关重要。服务器是承载数据的重要载体&#xff0c;在数据库性能可以通过扩容而无上限提升的情况下&#xff0c;数据…...

Android 单元测试问题总结(Robolectric+JUnit)

代码单元测试问题总结&#xff1a; 1、测试类中引用第三方jar包类报错 问题原因&#xff1a; 测试的库中没有包含第三方jar包。 解决办法&#xff1a; 在app下gradle中加入第三方jar包配置&#xff1a; testImplementation files(‘libs/third.jar’) 2、自定义Shadow类不生…...

专项攻克——二叉树

文章目录一、二叉树定义、分类二、二叉树的存储结构三、创建二叉树四、遍历方式一、二叉树定义、分类 二叉树&#xff1a;是N个结点的有序集合&#xff0c;该集合或者为空集&#xff0c;或者由一个根节点跟两棵互不相交的、分别称为根节点的左子树或者右子树的二叉树组成。每个…...

PACS系统源码 PACS源码 三维重建PACS源码

一、系统概述&#xff1a; ​基于VC MSSQL开发的一套三甲医院医学影像PACS系统源码&#xff0c;集成3D影像后处理功能&#xff0c;包括三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜、最大/小密度投影、心脏动脉钙化分析等功能。系统功能强大&#xff0c;代码…...

利用Mysql存储过程造百万级数据

1.准备工作&#xff08;1&#xff09;由于是使用存储过程&#xff0c;mysql从5.0版开始支持存储过程&#xff0c;那么需要mysql的版本在5.0或者以上。如何查看mysql的版本&#xff0c;使用下面sql语句查看&#xff1a;&#xff08;2&#xff09;创建两张表&#xff0c;表结构一…...

Vue2组件之间的传值通信

父子组件Vue中常见的是父与子组件间的通信&#xff0c;所要用到的关键字段是props和$emit。props接受父组件传给子组件信息的字段&#xff0c;它的类型&#xff1a;Array<string> | Object;详细解释可以参考https://cn.vuejs.org/v2/api/#props$emit由子组件触发事件向上…...

Spring Boot官方例子《Developing Your First Spring Boot Application》无法运行

官方的第一个例子就卡住了&#xff1a; https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#getting-started.first-application 按照要求&#xff0c;一步一步走&#xff1a; 查看Java版本和MVN版本&#xff1a; $ java -version openjdk version &quo…...

数据结构(3)— 线性表之顺序存储详解介绍(含代码)

&#xff08;1&#xff09;博客代码在数据结构代码---GitHub仓库&#xff1b;线性表介绍线性表的基础概念&#xff08;1&#xff09;甲骨文表示&#xff1a;线性表是零个或多个数据元素的有限序列。&#xff08;2&#xff09;线性表&#xff0c;顾名思义&#xff0c;就是说这个…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...