React Native跨平台开发2017 年终总结

简介:

从2016年开始关注React Native到现在,React Native的每一个版本发布我都会关注一下,虽然最近将重心转移到区块链开发上,这一年里,我还出版了一本《React Native移动开发实战》的书。在过去的一年中React Native经历了十几次的版本迭代,版本也从从v0.40升级到v0.52,总体来说,版本迭代没以前那么频繁,组件也越来越丰富,稳定性也越来越好了,下面就一些新组件,新API进行相关的总结。

React Native年度功能

首先,借用网络上的一张图,一个使用Xmind绘制的React Native功能的图,该图简单明了的介绍了React Native在2017年的一些变化。
这里写图片描述

其发布的版本即频率如下图:
这里写图片描述
可以看到,在这一年中,React Native更新的内容如下:
仅针对 Android: 新特性 218 个、修复 bug 79 个 ;
仅针对 iOS: 新特性 286 个、修复 bug 96 个;
双平台通用: 新特性 608 个、修复 bug 157 个、重大变更 35 个。

如果用图形表示,则如下图所示:
这里写图片描述

版本更新详解

如果要总结下每个版本更新的内容,可以看下面的介绍。

0.42

  • iOS:不再支持 Xcode7.x 编译,升级为 Xcode8.x;
  • Android:移除 RecyclerViewBackedScrollView 组件
  • 通用:WebView 组件新增 injectJavaScript 方法;
  • 通用:为组件的部分属性添加百分比支持;
  • 通用: init 项目时可以添加模板。

0.43

  • 通用:FlatList 正式发布;
  • 通用:样式支持 alignContent 属性;
  • 通用:init 项目时的模板可以自定义了。

0.44

  • 通用:不再支持通过 @provides NameOfModule 导入模块;
  • 通用:将 Navigator 组件标记为过期;
  • iOS:移除 MapViewIOS 组件,建议使用 Airbnb 的 react-native-maps。

0.45

  • 通用:添加支持通过 CameraRoll 组件访问视频。

0.46

  • 通用:引入 ImageBackground 组件。

0.47

  • Android: link 命令支持关联 Kotlin 模块;
  • Android:为 AndroidViewPager 添加 peekEnabled 属性。

0.48

  • iOS:移除 AdSupportIOS 组件。

0.49

  • 通用:将 index.ios.js 与 index.android.js 合并为 index.js;
  • 通用:TextInput 组件添加 autoGrow 属性。

0.51

  • 通用: 组件中不再支持嵌套组件;
  • 通用:添加 SwipeableFlatList 组件(实验性);
  • Android:添加对 Android 8.0 的支持。

0.51

  • 通用:padding,margin,border 等属性支持 RTL 布局方式;

更新内容

新增组件

在这一年里,React Native一个新增了8个组件。大家可以从中文文档获得更多的介绍信息。

  • CheckBox:一个用在React Native上的复选框组件,(目前仅支持Android,未来会支持iOS)
  • ImageBackground:背景图片组件,它是一个容器组件,支持包含其他组件
  • VirtualizedList:FlatList和 SectionList 的底层实现。
  • FlatList:基于VirtualizedList的高性能简单列表组件。
  • SwipeableFlatList:一个带滑动显示更多菜单的FlatList组件;
  • SectionList:基于VirtualizedList的高性能分组(section)列表组件。
  • MaskedViewIOS:可以为组件添加一个透明的遮罩;
  • SafeAreaView:用于包裹其他View,它会自动应用填充布局中不足的一部分,但不包括navigation bars, tab bars, toolbars等视图。

新增API函数

  • AccessibilityInfo:一个用于判断屏幕阅读器是否处于激活状态的API。
  • DeviceInfo:一个类专门提供屏幕尺寸,字体缩放等信息的API。
  • BackHandler:监听设备上的后退按钮事件(Android、Apple TV)。
  • findNodeHandle:用于获取组件的本地节点句柄的API。
  • TVEventHandler: 一个用于接受Apple TV远程事件(如遥控器的事件)的API。
  • YellowBox:通过这个API可以屏蔽指定的警告。

其他新增

  • ViewPropTypes:View 中的 propTypes 被移到 ViewPropTypes中,使用时需要单独导包。
  • takeSnapshot:将 takeSnapshot 方法从 UIManager 移动到ReactNative。

废弃组件及API

随着React Native版本的更新,React Native废弃了一些过时的API和组件。

  • BackAndroid:使用功能更丰富的BackHandler代替;
  • Navigator:使用react-navigation代替;
  • ListView:使用FlatList代替;
  • MapView:使用react-native-maps代替此地图组件;
  • RecyclerViewBackedScrollView:现在直接通过ScrollView即可解决滚动冲突;
  • AdSupportIOS:使用react-native-deprecated-modules或react-native-idfa代替;
  • NavigationExperimental:使用react-navigation代替;
目录
相关文章
|
17天前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
44 2
|
18天前
|
前端开发 Android开发 开发者
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第26天】近年来,React Native凭借其跨平台开发能力在移动应用开发领域迅速崛起。本文将探讨React Native的优势与挑战,并通过示例代码展示其应用实践。React Native允许开发者使用同一套代码库同时构建iOS和Android应用,提高开发效率,降低维护成本。它具备接近原生应用的性能和用户体验,但也面临平台差异、原生功能支持和第三方库兼容性等挑战。
28 0
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
239 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
5月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
130 1
|
6月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1875 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
5月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
5月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
110 2
|
6月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
5月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
76 0