概述
在过去的一年中 React Native 经历了从 v0.40 到 v0.52 的十几次的版本迭代, 我们看到在这十几次的版本迭代中 React Native 的组件库在不断地壮大, 在新引进的组件中既有 FlatListSectionList 等具有更高性能的列表组件, 也有与时俱进的用于适配全屏幕的 SafeAreView 组件, 同时呢, 一些性能较差无法适应 React Native 未来发展的一些老的组件, 如: ListViewNavigator 等组件也逐渐退出了沙场
本文将向大家总结 React Native 在过去的一年中的重要变更, 以及新组件, 新 API 的适配建议通过本文希望能帮助你快速的了解 React Native 在过去一年中的重要更新, 如何让你的 APP 去更快的应用 React Native 新的特性, 让 React Native 新的组件及特性来提高你应用的性能与体验
同时呢也为大家精心准备了 React Native 实战课程, 此课程会持续更新
图解 React Native 年度报告
新增组件 (8 个)
- CheckBox
- ImageBackground
- VirtualizedList
- FlatList
- SwipeableFlatList
- SectionList
- MaskedViewIOS
- SafeAreaView
新增 API(5 个)
- AccessibilityInfo
- DeviceInfo
- BackHandler
- findNodeHandle
- TVEventHandler
- YellowBox
其他新增 (2 个)
- ViewPropTypes
- takeSnapshot
过时移除 (7 个)
- BackAndroid
- Navigator
- ListView
- MapView
- RecyclerViewBackedScrollView
- AdSupportIOS
- NavigationExperimental
变更组件 API 说明
新增组件说明
组件 | 最低支持版本 | 说明 |
---|---|---|
CheckBox | 0.49 | 一个用在 React Native 上的复选框组件,<font color=#FF0000>(目前仅支持 Android,未来会对 iOS 做支持)</font> |
ImageBackground | 0.46 | 新增的背景图片组件,它是一个容器组件,支持包含其他组件 |
VirtualizedList | 0.43 | FlatList 和 SectionList 的底层实现。 |
FlatList | 0.43 | 基于 VirtualizedList 的高性能简单列表组件。 |
SwipeableFlatList | 0.50 | 一个带滑动显示更多菜单的 FlatList 组件; |
SectionList | 0.43 | 基于 VirtualizedList 的高性能分组 (section) 列表组件。 |
MaskedViewIOS | 0.48 | 可以为组件添加一个透明的遮罩; |
SafeAreaView | 0.50 | 用于包裹其他 View,它会自动应用填充布局中不足的一部分,但不包括 navigation bars, tab bars, toolbars 等视图。 |
新增 API 说明
组件 | 最低支持版本 | 说明 |
---|---|---|
AccessibilityInfo | 0.47 | 一个用于判断屏幕阅读器是否处于激活状态的 API。 |
DeviceInfo | 0.44 | 一个类专门提供屏幕尺寸,字体缩放等信息的 API。 |
BackHandler | 0.44 | 监听设备上的后退按钮事件(Android、Apple TV)。 |
findNodeHandle | 0.45 | 用于获取组件的本地节点句柄的 API。 |
TVEventHandler | 0.43 | 一个用于接受 Apple TV 远程事件 (如遥控器的事件) 的 API。 |
YellowBox | 0.44 | 通过这个 API 可以屏蔽指定的警告。 |
其他变更说明
组件 | 最低支持版本 | 说明 |
---|---|---|
ViewPropTypes | 0.44 | View 中的 propTypes 被移到 ViewPropTypes 中。 |
takeSnapshot | 0.44 | 将 takeSnapshot 方法从 UIManager 移动到 ReactNative。 |
过时移除说明
组件 | 最低支持版本 | 说明 |
---|---|---|
BackAndroid | 0.44 | 使用功能更丰富的 < a href="https://facebook.github.io/react-native/docs/backhandler.html#docsNav" ow="90" oh="18">BackHandler 代替; |
Navigator | 0.43 | 使用 < a href="https://reactnavigation.org/" ow="111" oh="18">react-navigation 代替; |
ListView | 0.43 | 使用 < a href="https://facebook.github.io/react-native/docs/flatlist.html" ow="51" oh="18">FlatList 代替; |
MapView | 0.43 | 使用 < a href="https://github.com/react-community/react-native-maps" ow="118" oh="45">react-native-maps 代替此地图组件; |
RecyclerViewBackedScrollView | 0.42 | 这个组件是很久之前为了解决 scroll-back-when-data-is-added 这个 bug 而添加的,但是现在已经直接通过 ScrollView 内部代码解决了这个问题。 |
AdSupportIOS | 0.48.4 | 使用 react-native-deprecated-modules 或 < a href="https://github.com/ptomasroos/react-native-idfa/" ow="112" oh="18">react-native-idfa 代替; |
NavigationExperimental | 0.44.3 | 使用 < a href="https://reactnavigation.org/" ow="72" oh="45">react-navigation 代替; |
以上便是同时 React Native 2017-2018 的年度报告, 另外你也可以通过学习 React Native 实战课程来获得 React Native 的更多实战经验及技巧;
参考: React Native 开发视频教程
赞赏支持
来源: http://www.devio.org/2018/02/26/React-Native-Annual-Report-2017-2018/