react-native
黄泽平
深耕前端,努力前进!
展开
-
react-native系列(1)入门篇:了解RN前景和入门指引
React-Native是一门用于开发移动应用程序的开源技术。随着原生开发Android和IOS移动应用的成本越来越高,很多企业选择使用跨平台一站式开发的React-Native(简称RN)作为替代方案。在Facebook的引领下,国外很多大厂也纷纷使用RN来开发移动应用程序,构建出世界一流的原生APP。值得一提的是,虽然RN是开源的技术,但是Facebook在 'React 的专利许可证' ...原创 2019-01-04 11:21:39 · 3244 阅读 · 1 评论 -
react-native系列(15)导航篇:底部导航TabNavigator参数及使用详解
本篇主要介绍的是TabNavigator,假设你已经对它的用法已经有了基本的认识,或重新去官网看一下官网地址:https://reactnavigation.org/zh-Hans/底部导航TabNavigator的效果类似于微信,效果图:TabNavigator生成的底部导航的结构,它包括4部分:选项卡栏 选项卡 图标 标签文本createBottomTabNav...原创 2019-03-09 02:25:06 · 2943 阅读 · 0 评论 -
react-native系列(16)组件补充篇:加载符号、范围选择、开关、状态栏
这些都是一些官方组件,由于样式上并不能完全自定义,一般不会直接用于实际项目中,但可以作为设计属性和结构组件时的一个参考例子,如入参的设计。ActivityIndicator显示一个圆形的加载中提示符号。ActivityIndicator在实际应用中一般为绝对布局,居中显示。属性 描述 style 用于设置布局类型 animating ...原创 2019-03-09 23:48:29 · 629 阅读 · 0 评论 -
react-native系列(23)API篇:使用Linking唤醒其它app及WebView
RN官方提供Linking库用于调起其他app或者本机应用。Linking的主要属性和方法有:属性与方法 描述 canOpenURL(url); 判断设备上是否有已经安装相应应用或可以处理URL的程序,本方法会返回一个Promise对象,只有一个回调参数,格式为Boolean值。 openURL(url); 打开设备上的某个应用或可以处理URL的程序,本方法会返回一个...原创 2019-03-14 16:38:15 · 7017 阅读 · 1 评论 -
react-native系列(17)API篇:Platform平台差异化加载
Platform模块用于区分移动设备的操作系统及api版本,另外,还可以根据不同平台的后缀扩展名自动识别并装载组件。系统区分要检测当前设备是什么操作系统,可以使用:const os = Platform.OS; // android|ios 要获取版本,可以使用:const version = Platform.Version;后缀扩展名当不同平台的代码逻辑较为复杂...原创 2019-03-10 22:26:16 · 3387 阅读 · 0 评论 -
react-native系列(24)API篇:屏幕宽高和屏幕像素密度
Dimensions屏幕宽高Dimensions库可以获取屏幕的宽高:import { Dimensions } from 'react-native';const {height, width} = Dimensions.get('window'); // 可用显示屏幕的宽高,不包括顶部的状态信息栏const {height, width} = Dimensions.get('s...原创 2019-03-15 14:40:53 · 1024 阅读 · 0 评论 -
react-native系列(18)API篇:AsyncStorage数据持久化
数据持久化是指使用AsyncStorage模块存储了数据后,即使关闭了app,只要下次打开依然可以读取到已存储的数据,它包含4个操作:存储、获取、移除和合并,存储数据的方式是Map存储,即(key, value)。另外,无论是key还是value都只支持字符串格式,其它格式将会报错(如果要存储对象格式的数据,可以通过JSON.stringify先把对象转化为字符串格式)。单一数据操作封装好...原创 2019-03-11 16:18:05 · 1954 阅读 · 1 评论 -
react-native系列(25)API补充篇:活动状态+设备返回键与振动+计时器+剪切板相关功能
AppState应用状态AppState用于检测当前APP应用是否在活动中。可以通过属性currentState获取:AppState.currentState如果间监听活动状态,可以使用:state = { appState: AppState.currentState}componentDidMount() { AppState.addEventLis...原创 2019-03-15 17:32:45 · 472 阅读 · 0 评论 -
react-native系列(19)API篇:请求系统权限(相册等)
在旧版本,要获取设备权限(如读写权限等)直接在项目中配置即可,无需过问app用户。在新版本的API中,出于安全考虑,要获取设备的相应权限需要通过权限请求,用户通过之后才可以获取权限,android和ios的获取权限方式不同。android权限官方提供了PermissionsAndroid来获取权限,以获取WRITE权限为例,看如下代码:UNSAFE_componentWillMoun...原创 2019-03-12 09:29:53 · 6655 阅读 · 0 评论 -
react-native系列(20)API篇:照片或视频的获取、保存、选择与上传
照片获取与保存官方提供了CameraRoll模块访问本地相册的功能,它包含两个方法:方法 描述 CameraRoll.getPhotos(params); 表示获取相册数据,参数格式如下: { first:number类型,要获取的照片数 assetType:All |Videos |Photos,默认为Photo...原创 2019-03-12 16:23:49 · 4435 阅读 · 1 评论 -
react-native系列(21)API篇:手势PanResponder详解
PanResponder库用于处理用户的手势操作,如单点触摸滑屏、多点触摸放大缩小等手势。PanResponder的创建代码如下:this._panResponder = PanResponder.create({ // 返回ture时,表示该组件愿意成为触摸事件的响应者,如触摸点击。默认返回false。 onStartShouldSetPanResponder: () ...原创 2019-03-13 14:35:08 · 2939 阅读 · 0 评论 -
react-native系列(14)导航篇:页面导航StackNavigator参数及使用详解
react-navigation导航是RN官网推荐使用的导航插件,目前最新版本为3.x,它包括3种类型的导航:StackNavigator TabNavigator DrawerNavigator本篇主要介绍的是StackNavigator,假设你已经对它的用法已经有了基本的认识,或重新去官网看一下官网地址:https://reactnavigation.org/zh-Hans/...原创 2019-03-08 23:16:35 · 3018 阅读 · 0 评论 -
react-native系列(6)组件篇: ScrollView滚屏及滚屏加载
ScrollView是RN中的一个滚动视图组件,它必须有一个确定的高度才能正常工作,因为在应用时往往会把将一系列不确定高度的子组件装进一个确定高度的容器。关于滚动视图高度这一点,不建议直接在样式中设置一个固定的height值(在目前最新版本中直接无效),而是通过设置flex: 1以使其自动填充父容器的空余空间,但前提条件是所有的父容器本身也设置了flex或者指定了高度,否则就会导致无法正常滚动。...原创 2019-02-27 10:36:58 · 4945 阅读 · 0 评论 -
react-native系列(13)动画篇:Animated动画库和LayoutAnimation布局动画详解
动画概念了解流畅、有意义的动画对于APP户体验来说是非常重要的,用RN开发实现动画有三种方法:requestAnimationFrame:称为帧动画,原理是通过同步浏览器的刷新频率不断重新渲染界面实现动画效果,现在网页H5动画基本都由这种实现。帧动画最初是Flash用于实现网页动画和游戏,即AS3编程。由于H5实现对动画更优的支持及Adobe对Flash的停止维护,这种编程现在基本已经被取...原创 2019-03-06 09:23:40 · 4901 阅读 · 1 评论 -
react-native系列(2)入门篇:Windows系统下配置Android开发环境
本文主要内容是在Window系统下配置Android APP的开发环境,配置过程将会有点麻烦,请大家需要有点耐心。当然大家也可以参考RN官网的配置过程,但实际上很多开发者根据官网步骤并没能配置出完整的RN开发环境。目前RN的最新版本是0.57,我们将以这个版本为例配置Android的开发环境。要配置RN的Android开发环境需要4个依赖:JDK(版本必须是 1.8) Node(版本必须...原创 2019-01-04 19:26:07 · 6162 阅读 · 6 评论 -
react-native系列(3)入门篇:使用VSCode及RN的代码调试过程
VSCode是一款代码编辑器,是微软的产品,这款编辑器非常受欢迎的一个原因是它支持很多插件,当然也包括RN开发的插件。VSCode的下载页是:https://code.visualstudio.com/,直接下载安装即可。安装好后,可以通过 ' Open Folder ' 选项打开RN项目:在使用VSCode进行RN项目开发前,我们需要先下载一些RN的插件,点击左边栏中 图标,在搜索...原创 2019-01-05 18:31:15 · 11007 阅读 · 7 评论 -
react-native系列(4)入门篇:在VSCode中配置ESLint(代码检测工具)
ESLint是一套javascript代码检测工具。要记住,代码也是写给人看的,所以一定要注意代码的编写规范。ESLint可以根据自己设置的规则实现对代码的检测,从而规范了代码的风格。本篇内容主要介绍如何在VSCode中使用ESLint。ESLint的官网地址是:https://eslint.org/全局初始化:$ npm install eslint -g在VSCode中安装E...原创 2019-01-06 13:37:27 · 5179 阅读 · 2 评论 -
react-native系列(7)组件篇:TextInput输入文本框的双向绑定
文本输入框是APP中最常用的交互组件,在RN中用TextInput标签表示。使用时要注意,它依然遵循双向绑定的规则,通过定义一个state状态值赋值至输入文本框的value属性中,同时组件监听onChangeText事件来获取输入文本的变化,将变化结果传递给state状态值,从而实现双向绑定。TextInput的属性与方法属性 描述 style 显示的样式...原创 2019-02-28 00:53:51 · 3608 阅读 · 0 评论 -
react-native系列(8)组件篇:Touchable实现按钮的点击触摸效果
在RN中并没有onclick监听,想要在组件中注册点击事件,需要使用Touchable。该组件也可以理解为一个Animated.View容器,然后把需要注册点击事件的组件作为子组件,并注册onPress函数实现点击效果。Touchable目前有三种效果:TouchableHighlight:点击时显示高亮效果 TouchableOpacity:点击时显示半透明效果 TouchableW...原创 2019-02-28 05:55:25 · 3179 阅读 · 0 评论 -
react-native系列(9)组件篇:最优列表显示方案FlatList和SectionList
FlatList列表FlatList是一个高性能的列表组件。原理是:只负责渲染当前可见的列表项,对于不可见的项将不会渲染因为可见的项总是有限的,当一个项被划出屏幕后,被滑出项的容器将会成为新滑入的项的容器而不会重新再渲染一个,因此性能要比ScrollView和ListView组件高。下面是一个原理简图:FlatList的属性和方法:属性 描述 style ...原创 2019-03-01 04:20:02 · 3808 阅读 · 1 评论 -
react-native系列(11)组件篇:Image图片加载和ImageEditor图片剪切
Image图片加载在RN中,用Image标签来渲染图片,图片的来源有两种:本地静态图片和网络图片(或Base64格式数据,如手机相册),针对不同的方式有不同的数据源写法,它们之间的区别如下:// 渲染本地静态图片<Image source={require('../../assets/images/watch.jpg')} />// 渲染网络图片<Image so...原创 2019-03-04 23:23:58 · 4247 阅读 · 1 评论 -
react-native系列(12)图标篇:使用阿里字体库iconfont图标和svg详解
在前端开发中,经常会用到iconfont图标库来管理图标,在RN开发中有时候同样需要如此。在百度上搜索过RN相关的图标管理方案,发现都较为复杂。于是写下了本篇博客,为大家介绍另外两种更优化的图标应用的方案,供大家学习参考。iconfont图标该方案同样适用于字体变更。从iconfont库下载好图标脚本,结构如下:打开iconfont.ttf文件,我们看一下字体全称是什么?正常情况下...原创 2019-03-05 05:20:15 · 7059 阅读 · 1 评论 -
react-native系列(5)布局篇:容器的定位与布局规则,初学必记
在浏览器中,我们用div作为基本容器,在RN中,我们使用View作为基本容器,它们的功能几乎是一样的,主要不同的是容器的定位(position)和布局(display)规则不一样。本篇博客主要就是分析一下它们之间的差异,以及在RN开发中如何使用定位和布局。容器定位定位,用position属性表示,其可准确地定义元素出现的位置的规则。在浏览器中(即PC端),position属性主要包含有...原创 2019-02-26 01:17:28 · 4288 阅读 · 0 评论 -
react-native系列(10)组件篇:Modal模态框实现弹窗效果
模态框应用于界面弹窗,为用户提供通知、选择、浏览等功能的组件。在RN中,模态框通过Moadl标签引用。使用时注意,可以把Modal看成一个仅提供功能的外壳,它不包含任何样式,只负责显示/隐藏和动画效果实现。Modal的子组件通常为一个View容器,在该View容器实现渲染界面和样式相关。在很多APP应用模态框的时候,出于视觉的优化,Modal子组件最外层的View容器为一层占满全屏的半透明背景层。...原创 2019-03-02 01:16:31 · 6641 阅读 · 0 评论 -
react-native系列(22)API篇:网络状态NetInfo与网络请求Fetch详解
网络状态NetInfoNetInfo库的作用是检测当前是否联网及获取联网方式及网络牌照等信息。要使用NetInfo库,需要先在AndroidManifest.xml中配置权限:<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />要检测网络是否在线可以使用:NetInf...原创 2019-03-13 16:02:22 · 3095 阅读 · 1 评论