- 本文为 Marno 原创,转载必须保留出处!
- 公众号【 aMarno 】,关注后回复 RN 加入交流群
- React Native 优秀开源项目大全:http://www.marno.cn
一、导读
本次更新亮点:
- 正式放出了 FlatList
- 添加支持 alignContent 属性
- 可以自定义 init 时候的模板了(具体往下看)
本期最大的亮点可能就是 FlatList 了。还有就是支持将自定义的模板工程上传到 npm。
上次更新就添加了在 init 工程时候可以直接创建带有常用功能的模板工程,当时我说要是可以自定义模板就好了,这个版本就支持了,以后不用再傻傻的每次 react-native init XXX
了,直接使用 react-native init XXX --template demo
初始化模板工程。如何创建并上传自己的模板工程可以往下翻。
二、重大变化
修改 Dimensions.get(‘screen’).fontScale 的返回值
在 Android 平台,下面几个方法的返回值现在不一样了
1. Dimensions.get(‘window’).fontScale
2. Dimensions.get(‘screen’).fontScale
3. PixelRatio.getFontScale()
如果正在使用这些方法的人必须注意了!这几个方法之前代表 DisplayMetrics.scaledDensity 的返回值,现在代表 Configuration.fontScale 的返回值当 native 确定调用 dispatched 时候才会回调 batchDidComplete
这项修改是因为他影响到了 onBatchComplete ,但是 modules 确实不应该依赖
三、新特性
Android平台
- 为 TextInput 的属性添加 caretHidden (光标隐藏)的实现
- 更新文档中的“Getting Started”部分的 Android Studio 版本
- 在 Android 上使用 selectionColor 属性时更改光标颜色
- 控制台不再记录 Webview 组件的日志
- 组件在加载网络图片时可以支持添加 HTTP 请求头
- Docker Testing Environment for Android & JS
- 为 Alert 添加消失时的回调方法 onDissmiss
- 对 android bridge 可见部分扩展了一点
- Android 的 StatusBar 支持 barStyle
- 使用 ‘ if ’ 代替 BUCK 文件中最高层的 ‘ elif ’
- 消除 improt re 在 BUCK 文件中的使用
- 在 JSPackagerClient 中引入 Responder 和 JSONObject
- 当布局发生变化时只调用 onLayout
- 记录 ReactContext 计数器
- Yoga:在 LayoutShadowNode 更高效的解码动态值
iOS平台
- 不再执行 link 命令的时候在 plist 中添加重复的 font 条目
- 添加了 RCTDevSettings 模块
- 推荐安装最新版的 Xcode
- 在 React/Views/RCTTabBarItem.h 的头文件中暴露 ‘RCTConvert UITabBarSystemItem:’
- 用下标访问取代 RCTJavascriptLoader 中的 valueForKey
- 移动 RCTFollyConvert 到正确的命名空间里
- 移除不再使用的 RCTMessageQueue
- 使 RCTRefreshControl 不再依赖属性设置的顺序
- 简化 RCTRootViewSizeFlexibility 的代码
- 将 RCTShadowViews 中的 cssNode 改名为 yogaNode
- 移除 accessibilityLabel 中的前置空格
- 为 RCTRootView 提供更好的 UIKit 布局元素支持
- 将 RCTRootView 属性中的 intrinsicSize 更名为 intrinsicContentSize
- 暴露 accessibilityViewIsModal 的属性给任意 view
iOS / Android 通用
- 将 AndroidConstants 和 IOSConstants 合并到 PlatformConstants 中
- 修复当前 CI 失败的问题 and allows tree shaking of native dev support code
- 为 NavigationExperimental 添加过期警告(终于过期了,确实不好用!)
- Yoga: 边距支持设置为 ‘ auto ’
- Yoga: 组件添加一个 ” display:none ” 属性,使组件在调用 render 方法前不可见
- Yoga: 重命名 YGUnitPixel 为 YGPoint…
- Yoga: 修改 flex 的 get 方法返回实际被 set 的值
- Yoga: 添加 alignContent 属性(终于有了!)
- Yoga: Default root node to size of parent contraints
- Yoga: flex-wrap属性可以支持 wrap-reverse 了
- Yoga: 移除一些计算 mainSize / crossSize 时的重复代码
- Yoga: 通过 parent size 取代 YGNodeCalculateLayout 中的 node size
- Yoga: 将配置信息移到 YGConfig 中然后在将他们传入CalculateLayout
- CLI: 可以将自定义的工程模板发布到 npm (上次更新就说要是可以自定义模板就好了,现在果真就有了)
详细介绍:https://github.com/facebook/react-native/commit/17c175a149bc410a9b167b31f13474d8c6e9832c
参考模板工程:https://github.com/mkonicek/react-native-template-demo
使用模板方法:react-native init MyApp --template demo
- 对于忘记使用 AppRegistry 注册时显示的报错信息中添加了一个 hint 帮助用户定位问题
- FlatList: 添加对 SectionSeparatorComponent 的支持,就是也可以对列表进行分区了
- FlatList: 滚动时支持使用原生动画
- FlatList: 重命名组件属性使之与 SectionList 匹配
- FlatList: 在文档中添加关于 PureComponent 的警告
- FlatList: 简化滚动交互
- FlatList: 改进 flow typing
- FlatList: 传递 onScroll
- FlatList: 支持配置 Viewability
- FlatList: 可以通过 minViewTime 和 waitForScroll 设置判断 items 的可见与否
- FlatList: 重命名 Viewable 为 ViewToken
- FlatList: Missed some viewablePercentThreshold references
- FlatList: 将组件从 Experimental(实验性) 包中移到了 CustomComponets/Lists 包中
- 尝试重新启动一些失败的测试
- 为 DevTools 单独建立了一个仓库
- 提供 AppRegistry.getRegistry() 方法让我们可以对已经注册的组件进行一些操作
- 重命名 callFunction 为 jniCallFunction
- 防止 brisge 重载后出现死锁
- 纠正文档中的错误语法和拼写错误
- 允许为 native 动画时间添加监听器
- Packager: Introducing async/await, return of the yarn
- Packager: BatchProcessor: 在 queue() 中使用 Promise
- Packager: BatchProcessor: 在 processBatch() 中使用 Promise
- 整理了 Animated 的文档
- 解决在 Fiber 准备完成前使用 inspector 出现 redbox
- 防止丢失 native 模块
- 在 CxxBridge 支持 QuickPerformanceLogger.js
- 使用 const 代替 var 进行 NativeModule 引入的声明
- 从 polyfills 中移除 @providesModule 的注释
- 删除特殊的网络用语
- 更新 IntegrationWithExistingApps.md 文档内容
- 在文档中添加对 CameraRoll.getPhotos() 的参数和返回值类型的注释
- 忽略已卸载组件上的事件监听器
- 将 BatchedBridge 模块的配置移到 InitializeCore 中
- 修改 SwipeableListView 属性,不强制传入 onScroll
- 使 Touchable 类型组件的文档保持一致
- 调整 componentWillMount 和 componentWillUnmount 的顺序
- Packager: Terminal: split status too big to fit in screen
- Packager: 抛弃 bundle 配置中的 protocol、host 和 port of URLs
- Packager: 简化 fs.stat mocks
- 完成了关于 AccessibilityInfo 的所有实现,之前只有 iOS 有,现在补齐了 Android 并更新了文档。
- 修改 ListView 的文档描述,去掉 ‘ vertically ’ 一词,因为该单词有误导用户觉得ListView 只支持竖向列表,而实际上并不是那样。
- 更新 UsingAScrollView.md 文档内容
- NavigationExperimental 正式过期,官方在文档中也推荐使用 React Navigation。具体可以到我主页找一下关于 React Navigation 介绍的文章
- Improve doc generation with flow types
- 提升了 Picker.Item 的 flow
四、修复 Bug
Android平台
- 修复 Android 原生动画事件触发延时的问题
- 修改 DatePickerAndroid.open 文档的部分内容格式
- 对 CatalystInstanceImpl 中 BundleHeader 进行默认初始化
- 修复由于 复制/粘贴 在开源的 BUCK 文件中引起的问题
iOS平台
- YellowBox 只在 Android 上提供 elevation 属性
- 修复 badgeColor 在 iOS 10 前期几个版本显示异常的问题
iOS / Android 通用
- 修复动画博客列表
- Yoga:修复多行显示时 align-content 发生拉伸
- Yoga:修复了 YGUnitAuto 的一些小问题
- Yoga:修复设置 align-content: strech 时覆盖 align-item
- Yoga:修正在 LayoutPropType 中关于 Yoga 的评论
- Yoga:修复start 和end 时自动边距的问题
- Yoga:修复父组件使用 flex 不固定尺寸时子组件属性使用百分比不能精确测量的问题
- Yoga:修复使用 align-items 的 wrapping container 中的组件表现为不拉伸
- FlatList:修复 getItemLayout 的 flow type 包含 index
- FlatList:API 更新并且修复 bug
- FlatList:修复 ItemSeparators 重复的问题
- FlatList:修复 minimumViewTime
- 修复嵌套异常的错误处理
- 修复 react-native-git-upgrade 缓存清除
- Fix the website build
- 修复在测试失败时候的行号显示错误问题
- 修复 ResolutionRequest 的拼写错误
- 修复Creating Native UI Component docs文档中重复符号的错误
- 修复 ViewabilityHelper (itemVisiblePercentThreshold 拼错了) 中的拼写错误
- Flow:修复 StackFrame 的类型定义
- Flow:修复大量的 flow annotations
- Flow:修复 flow 错误
- Flow:修复 flowconfig 在新建项目中的问题
- 修复 lint 时的出现 1/n 的错误
- 修复 lint 时的出现 2/2 的错误
- 修复在 Windows 上使用绝对路径的问题
- Fix the RN OSS gradle build