React Native移动框架功能研究
React Native移动框架功能研究
此篇只研究React Native框架的功能。
一、React Natvie是什么
React Native是使用React(或者说JS)来开发原生APP的框架。
二、React Native的愿景
1.提供一直的跨平台开发原生APP的一直体验。
2.使用JS和React提高跨平台开发效率。
三、React Native提供的特性
1.提供了丰富的原生组件,可以是APP获得平台一致的视觉效果和体验,同时获得最佳的性能和流畅性。
// iOS & Androidvar React = require('react-native'); var { ScrollView, TouchableHighlight, Text } = React;var TouchDemo = React.createClass({render: function() {return (<ScrollView><TouchableHighlight onPress={() => console.log('pressed')}><Text>Proper Touch Handling</Text></TouchableHighlight></ScrollView> );}, });
2.JS代码和原生平台之间的所有操作都是异步执行的,原生模块可以根据需要自由创建线程。同时两者之间的通讯是完全可序列化的,这使其可以借助Chorme开发这工具进行调试。
3.提供强大的触控事件处理系统,可以在复杂的UI层次结构下方便的处理触控事件。
// iOS & Androidvar React = require('react-native'); var { ScrollView, TouchableHighlight, Text } = React;var TouchDemo = React.createClass({render: function() {return (<ScrollView><TouchableHighlight onPress={() => console.log('pressed')}><Text>Proper Touch Handling</Text></TouchableHighlight></ScrollView> );}, });
4.
通过
Flexbox
简化
UI
布局,提供高性能机制声明样式和布局,并可直接应用到组件中。
// iOS & Androidvar React = require('react-native'); var { Image, StyleSheet, Text, View } = React;var ReactNative = React.createClass({render: function() {return (<View style={styles.row}><Imagesource={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}style={styles.image}/><View style={styles.text}><Text style={styles.title}>React Native</Text><Text style={styles.subtitle}>Build high quality mobile apps using React</Text></View></View> );}, }); var styles = StyleSheet.create({row: { flexDirection: 'row', margin: 40 },image: { width: 40, height: 40, marginRight: 10 },text: { flex: 1, justifyContent: 'center'},title: { fontSize: 11, fontWeight: 'bold' },subtitle: { fontSize: 10 }, });
5.
提供灵活的机制,方便自定义原生视图和模块。
四、
React Native
的功能
1.
样式
React Native
在
JS
中定义和引用样式。可以通过
StyleSheet
定义样式
var styles = StyleSheet.create({base: {width: 38,height: 38,},background: {backgroundColor: '#222222',},active: {borderWidth: 2,borderColor: '#00ff00',}, });
在组件中使用样式
<Text style={styles.base} /> <View style={styles.background} />
同时可以接受多个样式,后边的会覆盖前边的样式
<View style={[styles.base, styles.background]} />
可以结合表达式控制是否应用样式
<View style={[styles.base, this.state.active && styles.active]} />
也可以直接在元素中声明样式,但是每次渲染都会重建样式,影响性能。
<Viewstyle={[styles.base, {width: this.state.width,height: this.state.width * this.state.aspectRatio}]} />
样式也可以作为参数传递
var List = React.createClass({propTypes: {style: View.propTypes.style,elementStyle: View.propTypes.style,},render: function() {return (<View style={this.props.style}>{elements.map((element) =><View style={[styles.element, this.props.elementStyle]} /> )}</View> );} });// ... 在别的文件中引用List组件 ... <List style={styles.list} elementStyle={styles.listElement} />
2.
图片
加载本地静态图片,图片基于当前
js
的目录。如果带有平台相关的扩展名,则系统自动根据当前的系统平台自动加载相关的图片,例如
my-icon.ios.png
<Image source={require('./my-icon.png')} />
使用
@2x
,
@3x
这样的文件名后缀,可以为不同的屏幕精度提供图片
可以在
React
Native
中直接使用内嵌到
APP
中的图片资源
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
可以加载网络图片,但是需要手动指定图片大小
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 400, height: 400}} />
通过将元素嵌套到
Image
中实现背景图片
return (<Image source={...}><Text>Inside</Text></Image> );
3.
手势触控系统
提供
Touchable
和
TouchableHighlight
来定义可触控控件。响应者的声明周期如下
:
是否愿意成为响应者
View.props.onStartShouldSetResponder
(
开始触摸的时候是否愿意
)
View.props.onMoveShouldSetResponder
(如果不是响应者,则每次开始移动触控点时询问是否原因)
如果愿意成为响应者
,则接下来开始尝试成为响应者
View.props.onResponderGrant
(成功成为响应者)
View.props.onResponderReject
(被拒绝成为响应者)
如果成功成为响应者
,则开始具体的响应触控事件
View.props.onResponderMove
(响应屏幕手指移动)
View.props.onResponderRelease
(响应屏幕手指离开)
View.props.onResponderTerminationRequest
(其他组件请求接替响应者,返回
true
则释放自己响应者角色)
View.props.onResponderTerminate
(响应者角色已交出)
onStartShouldSetResponder
与
onMoveShouldSetResponder
是以冒泡的形式调用的,即嵌套最深的节点最先调用
。如果某个父
View
会希望能先成为响应者。我们可以利用“捕获期”来解决这一需求
。
View.props.onStartShouldSetResponderCapture
View.props.onMoveShouldSetResponderCapture
4.
动画
用于全局的布局动画
LayoutAnimation
,和用于创建更精细的交互控制的动画
Animated
。
Animated
库使得开发者可以非常容易地实现各种各样的动画和交互方式,并且具备极高的性能
。它包括两个值类型,
Value
用于单个的值,而
ValueXY
用于向量值;还包括三种动画类型,
spring
,
decay
,还有
timing
,以及三种组件类型,
View
,
Text
和
Image
。我们可以使用
Animated.createAnimatedComponent
方法来对其它类型的组件创建动画
。
class Playground extends React.Component {constructor(props: any) {super(props);this.state = {bounceValue: new Animated.Value(0),};}render(): ReactElement {return (<Animated.Image // 可选的基本组件类型: Image, Text, Viewsource={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}style={{flex: 1,transform: [ // `transform`是一个有序数组(动画按顺序执行){scale: this.state.bounceValue}, // 将`bounceValue`赋值给 `scale` ]}}/> );}componentDidMount() {this.state.bounceValue.setValue(1.5); // 设置一个较大的初始值Animated.spring( // 可选的基本动画类型: spring, decay, timingthis.state.bounceValue, // 将`bounceValue`值动画化 {toValue: 0.8, // 将其值以动画的形式改到一个较小值friction: 1, // Bouncier spring }).start(); // 开始执行动画 } }
多个动画可以通过
parallel
(同时执行)、
sequence
(顺序执行)、
stagger
和
delay
来组合使用
。
Animated.sequence([ // 首先执行decay动画,结束后同时执行spring和twirl动画Animated.decay(position, { // 滑行一段距离后停止velocity: {x: gestureState.vx, y: gestureState.vy}, // 根据用户的手势设置速度deceleration: 0.997,}),Animated.parallel([ // 在decay之后并行执行: Animated.spring(position, {toValue: {x: 0, y: 0} // 返回到起始点开始 }),Animated.timing(twirl, { // 同时开始旋转toValue: 360,}),]), ]).start();
LayoutAnimation
允许在全局范围内创建和更新动画,它常用来更新
flexbox
布局
。
var App = React.createClass({componentWillMount() {// 创建动画 LayoutAnimation.spring();},getInitialState() {return { w: 100, h: 100 }},_onPress() {// 让视图的尺寸变化以动画形式展现 LayoutAnimation.spring();this.setState({w: this.state.w + 15, h: this.state.h + 15})},render: function() {return (<View style={styles.container}><View style={[styles.box, {width: this.state.w, height: this.state.h}]} /><TouchableOpacity onPress={this._onPress}><View style={styles.button}><Text style={styles.buttonText}>Press me!</Text></View></TouchableOpacity></View> );} });
如果对性能要求比较高
,
setNativeProps
方法可以使我们直接修改基于原生视图的组件的属性,而不需要使用
setState
来重新渲染整个组件树
,从而可以使我们获得较好的性能。此时应该注意被
render
重新调用的时候覆盖掉
。
5.
提供的调试工具
开发者菜单
Chrome
开发者工具
React
开发工具插件
FPS
监视器
6.
自动化测试
使用
Jest
进行单元测试
,使用
Travis
作为持续集成系统。
集成测试和快照测试只使用
IOS
。
7.JS
环境
在
IOS
、
Android
模拟器和真机上,使用的是
JavaScriptCore
。
在
Chorme
调试时,代码运行在
V8
引擎中。
React Native
从
0.5.0
版本开始已经内置
Babel
转换器
,使我们可以使用最新的
js
语法编写代码
。
8.
导航器
官方提供提供通用跨平台的
Navigator
,
js
编写方便扩展。
开源社区提供的
NavigatorIOS
,只能在
IOS
中使用,依赖
Object-c
,积压
bug
无人解决,不建议使用。
9.
特定平台代码
将代码放在特定平台的文件夹下
/common/components/
/android/components/
/ios/components/
组件命名中添加平台标志
BigButtonIOS.js
BigButtonAndroid.js
特定平台扩展名
BigButton.ios.js
BigButton.android.js
在
js
中判断当前平台
var {Platform} = React;var styles = StyleSheet.create({height: (Platform.OS === 'ios') ? 200 : 100, });
五
、已知存在的问题
模块和原生视图缺失
,比如
Maps
、
Spinner
等
某些属性仅仅支持单个平台
有一些已经存在的组件和
API
没能进行统一抽象为通用的
,比如
ActivityIndicatorIOS
和
ProgressBarAndroid
overflow
样式在
Android
中无法使用
不支持
Android M
(
6.0
)的权限
NG
图片的内存问题
转载于:https://www.cnblogs.com/wufengtinghai/p/5229333.html
React Native移动框架功能研究相关推荐
- react native一键分享功能实现amp;原理和注意点(支持微信、qq、新浪微博等)
前言 目前使用一键分享比较主流的两个SDK:ShareSDK.友盟: 又因为友盟功能比较多且比较全,比如说友盟统计.友盟推送等,所以本文重点介绍的是友盟分享功能在rn上的应用以及要注意的点. reac ...
- React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)
[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 有了前面<React Native Android 从学车到 ...
- React Native指南
React本机 (React Native) React Native is a cross-platform framework for building mobile applications t ...
- 如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
- 是时候了解React Native了
随着科技的发展,手机开发也在向好的方向不停的转变.IOS和Android两大手机操作横空出世,称霸江湖.我们每开发一个手机软件最少都需要开发这两个终端. 两大操作系统都在不断的提升完善,能力越来越强大 ...
- 为什么 React Native 连遭 Airbnb、Udacity 抛弃?
投稿 | 亦枫 责编 | 唐小引 Udacity 移动端团队最近删除了 App 中使用 React Native 语言开发的相关功能. 我们收到大量有关我们用法或 React Native 的问题以及 ...
- 庖丁解牛!深入剖析React Native下一代架构重构
Facebook在2018年6月官方宣布了大规模重构React Native的计划及重构路线图.目的是为了让React Native更加轻量化.更适应混合开发,接近甚至达到原生的体验.(也有可能是Re ...
- H5、React Native、Native应用对比分析
@王利华,vczero "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候, ...
- React Native 调研报告
Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"le ...
最新文章
- 2019年,自动化机器学习AutoML技术还火吗? | BDTC 2019
- hdu 4722(记忆化搜索)
- python数组切片效率_python – 对numpy数组切片进行采样的最快方法是什么?
- 前端优化-Img与background
- Python怎么使用beautifulsoup来从HTML片段中删除标签
- 【YII】常用代码积累
- flume avro java_flume之Avro Source和Avro Sink
- Hibernate配置文件与关联映射介绍
- pojCashier Employment
- Unicode字符集下UTF-8 、UTF-16编码和GBK(GB2312)字符集
- python 登陆微博 被删除 token_Python | 模拟微博登陆,亲测有效
- 上云一时爽,遇坑泪两行
- 现实迷途 第三十六章 互相摊牌
- win7无线网显示小太阳
- 2021年中国人工智能行业全景图谱
- 【camera】Mtk相机冷启动的拆解笔记
- AI写作机器人-ai文章生成器在线
- 如何看linux是arm还是amd_享受还是想瘦?看游泳如何让你“享瘦”
- Android开发艺术探索——第十四章:JNI和NDK编程
- L1-2 h0053. 游戏时间 (5 分)
热门文章
- set、vector与list的构造与排序的耗时测试
- Docker本地私有仓库的建立
- mysql数据库导出时报错mysqldump: Got error: 145的解决方法
- koa源码分析-generator和yield分析
- InnoSQL/MySQL并行复制的实现与配置
- Jquery导航条淡进淡出相册(动态无刷新加载数据库数据)
- div+css中常见的问题
- [Tip: bat] About %~dp0
- [致歉]博客园升级造成的问题
- Netty 的 FastThreadLocal 到底快在哪里