React Native基础知识
React Native是一个使用Javascript和React来编写跨终端移动应用(Android或iOS)的一种解决方案。跨平台移动应用开发框架。
React Native相对于原生iOS、Android有哪些优势?
1.性能方面媲美原生App
2.绝大部分代码同时适用IOS/Android,一套代码两系统适用。
3.使用Javascript编码,上手容易
4.组件式开发,易于管理维护,代码复用率高。
5.代码更改后会自动刷新,节省等待时间。
6.支持热更新,更新无需重新安装App。
React Native组件的生命周期
和react组件的生命周期一致。
react-native常用组件
View: 创建UI时最基础的组件,View是一个支持Flexbox布局、样式、触摸响应、和一些无障碍功能的容器。View在设计上可以嵌套使用。
Text:用于显示文本的React组件,也支持嵌套、样式以及触摸处理。
Image:用于显示多种不同类型图片的React组件,包括、react组件,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册等)。
两种引入图片方式:
1.require相对路径方式加载 <Image source={require('./img/logo.png')} />
2.使用url加载网上图片资源 <Image source={{uri:'http:..............jpg'}} />
ImageBackground:可以设置背景图片,使用方法与Image一致。
TextInput:允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。最简单 的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。
TouchableOpacity:本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。
ScrollView:一个封装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统。ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。一般来说我们会给ScrollView设置flex:1以使其自动填充父容器的空余空间,但前提条件时所有的父容器本身也设置了flex或者指定了高度,否则会导致无法正常滚动。
属性:contentContainerStyle
这些样式会应用到一个内层的内容容器上,所有的子视图都会包裹在内容容器内。
属性: showsHorizontalScrollIndicator 当此属性为 true 的时候,显示一个水平方向的滚动条。
属性:horizontal 当此属性为 true 的时候,所有的子视图会在水平方向上排成一行,而不是默认的在垂直方向上排成一列。默认值为 false。
属性:scrollEnabled
当值为 false 的时候,内容不能滚动,默认值为 true。
注意即便禁止用户滚动,你也仍然可以调用scrollTo
来滚动。
StyleSheet:实现了类似Web中CSS样式表的功能。
React Native 存储数据组件AsyncStorage
AsyncStorage是一个简单的,未加密的,异步的,持久的键值存储系统。
AsyncStorage是一个全局的存储系统,没有实例这一概念,要存储数据就往里面扔,要读取数据就发起请求。
AsyncStorage对外提供了简单 的Javascript接口。每一个接口都是异步的,每一个接口都返回一个Promise对象。
React Native基础知识相关推荐
- echarts结合react开发基础知识学习
echarts基础知识学习 1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...
- React Native基础入门教程:初步使用Flexbox布局
一.长度的单位 在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示"与设备像素密度无关的逻辑像素点". 这个怎么理解呢? 我 ...
- 适用于所有人的Nextjs-具有一些React的基础知识
具备一些基本的React和JavaScript知识,您将一路走来 (With some basic React and JavaScript knowledge, you'll be on your ...
- 【React框架基础知识】React框架的简介与基本使用方法
一.简介 React:由Facebook开发的用于构建用户界面的JavaScript库(开源). 1.1 为什么要学前端框架? 原生Javascript有很多痛点: 原生JavaScript操作DOM ...
- React (native) 相关知识
container component provider组件 react里的redux进阶玩法 react组件的生命周期 conductor / componentWillMount / render ...
- React Native 移动开发入门与实战
课程简介 本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
- React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述 本节课将从React的特点.如何使用React.JSX语 ...
- react学习预备知识_在10分钟内学习React基础知识
react学习预备知识 If you want to learn the basics of React in the time it takes you to drink a cup of coff ...
- react-native基础知识以及从零搭建
React native基础 React native介绍 使用JavaScript和React编写原生移动应用 React Native应用是真正的移动应用,React Native产出的并不是&q ...
- 坚如磐石的React.js基础:入门指南
by Rajat Saxena 通过拉贾特·萨克森纳(Rajat Saxena) 坚如磐石的React.js基础:入门指南 (Rock Solid React.js Foundations: A Be ...
最新文章
- docker仓库harbor搭建
- Python常见编译错更新
- c语言整数检验,C程序整数缺陷的检测与修复
- 如何在eclipse jee中创建Maven project并且转换为Dynamic web project
- dbus服务自启动方法
- maven安装及集成myeclipse
- JavaScript(九):JavaScript中的内置对象
- 总结搜索型手工注入的全过程
- 我毕业一年后。生活的艰辛。我的程序人生该怎么走
- leetcode刷题java之739. 每日温度
- java: Compilation failed: internal java compiler error
- HDTV 之-HDMI HPD
- 数据结构与算法基础学习(一)
- matlab极坐标画椭圆,matlab怎么画极坐标
- Yolov3,v4,v5区别
- 使用javascript抓取网站数据
- C++算法与设计学习记录
- 2020 - 04 - 30 个人笔记
- 【知乎问题】如何让不懂编程的人感受到编程的魅力?
- 程序员的乐趣,生成自定义二维码,5行Python代码就解决
热门文章
- 0x0000000指令引用”0x0000000”内存,该内存不能为written
- matlab脉宽调制pwm,脉宽调制matlab仿真
- 如何快速算出一个数的n次方?
- 茴字有几种写法?SQL排名问题之全局排名的四种解法
- 计算机硬盘启动设置方法,bios设置硬盘启动,图文介绍两种设置bios硬盘启动方法...
- C语言打印菱形和空心菱形
- python可以做回归分析吗_使用python进行回归分析
- Windows Server 2008 R2 远程管理
- Spring Boot实现QQ邮件发送,用户注册功能——前后端分离版
- 计算机网络面试题汇总