您当前的位置: 首页 > 技术文章 > 移动开发

React Native基础知识

作者: 时间:2022-04-03阅读数:人阅读

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')} />

React Native基础知识(图1)

 2.使用url加载网上图片资源 <Image source={{uri:'http:..............jpg'}} />

React Native基础知识(图2)

ImageBackground:可以设置背景图片,使用方法与Image一致。

TextInput:允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。最简单 的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。

TouchableOpacity:本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。

ScrollView:一个封装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统。ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。一般来说我们会给ScrollView设置flex:1以使其自动填充父容器的空余空间,但前提条件时所有的父容器本身也设置了flex或者指定了高度,否则会导致无法正常滚动。

StyleSheet:实现了类似Web中CSS样式表的功能。

React Native基础知识(图3)

React Native 存储数据组件AsyncStorage

AsyncStorage是一个简单的,未加密的,异步的,持久的键值存储系统。

AsyncStorage是一个全局的存储系统,没有实例这一概念,要存储数据就往里面扔,要读取数据就发起请求。

AsyncStorage对外提供了简单 的Javascript接口。每一个接口都是异步的,每一个接口都返回一个Promise对象。

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦