前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Native 0.50版本新功能简介

React Native 0.50版本新功能简介

作者头像
xiangzhihong
发布2018-02-06 19:57:19
2.2K0
发布2018-02-06 19:57:19
举报
文章被收录于专栏:向治洪向治洪

React Native在2017年经历了众多版本的迭代,从本人接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案。虽然,目前存在着很多的功能和性能的缺失,但是不可否认的是React Native确实在进步。

本文主要从以下几个方面来对React Native0.50+进行讲解:

  • 在兼容性方面新增了对Android8.0、iPhone X的支持;
  • 在API方面为TimePicker添加了打开方式的API,另外允许在构建Android项目的时候指定applicationId;
  • 在组件方面,新添加了支持侧滑显示菜单的SwipeableFlatList,以及SafeAreaView。
  • 修复了一些关键性的Bug;

Image组件

React Native 0.50版本中 Image组件迎来了比较大的一个特性的改变,即在React Native 0.50及以上版本中Image不在支持包裹内容。例如:

代码语言:javascript
复制
<Image style=
       resizeMode="center"
       source=>
    <Text>《React Native移动开发实战》</Text>
</Image>

以上代码在0.50之前是可以正常运行的,在0.50上运行会报:

代码语言:javascript
复制
Unhandled JS Exception: Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

如果要在0.50+版本中使用Image组件,可以按照下面的用法:

代码语言:javascript
复制
<Image style=
       resizeMode="center"
       source=/>
 <Text>《React Native移动开发实战》</Text>

其他重大变更

  1. ReactShadowNode由类被抽象成了接口,代替他的是ReactShadowNodeImpl,这是来自底层的变更,对上层API无影响。
  2. enableBabelRCLookup(启用BabelRCL查找),由原来的默认开启改为了默认关闭,改过之后Metro只会关注项目的.babelrc文件。在之前Metro会关注node_modules下的.babelrc文件,这样将会导致一些问题,因为它没有Babel的版本,也没有node_modules/randompackage/.babelrc所需的plugins/presets。现在,从0.50版本之后getEnableBabelRCLookup默认返回false,从而避免了这一问题。如果你不想使用这一改变,那么可以这样配置: 创建一个rn-cli.config.js文件,并添加:
代码语言:javascript
复制
module.exports = {
    getEnableBabelRCLookup() {
      return true;
    },
  };

然后,在node_modules下修改.babelrc :

代码语言:javascript
复制
    {"plugins": ["dummy"]}

修复的系统bug

在0.50版本中,修复的系统bug有:

Android

1,修复了在Android SDK 15及以下版本设置背景的Bug。在Android中设置View的背景在SDK15及以下和以上和的API是不一样的,在之前的RN版本中没有做差异判断,所以会导致在低版本设置背景的Bug,在0.50及以上版本底层实现上添加了ViewHelper工具类,当设置背景时会根据当前SDK版本是16及以上或以下进行做不同的处理;

处理的源码如下:

代码语言:javascript
复制
public class ViewHelper {
 public static void setBackground(View view, Drawable drawable{ 
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { 
 view.setBackground(drawable); 
 } else { 
 view.setBackgroundDrawable(drawable);
    } 
  }

2,修复了slider的minimumTrackTintColor 和 maximumTrackTintColor在Android和iOS上颜色颠倒的问题。例如:

代码语言:javascript
复制
<Slider
    style=
    minimumTrackTintColor="red"
    maximumTrackTintColor="blue"
  />

显示效果如下:

这里写图片描述
这里写图片描述

3,修复了Android 4.1-4.3 WebView的Bug。

在0.50之前的版本当使用WebView的baseUrl时在Android 4.1-4.3会显示出html源码,这是因为在Android 4.1-4.3中WebView不支持text/html的charset=utf-8的MIME type所导致的。

4,修复了View Style的overflow hidden问题。

很久以来overflow样式在Android默认为hidden而且无法更改。Android的overflow:hidden还有另外一个问题:如果父容器有borderRadius圆角边框样式,那么即便开启了overflow:hidden也仍然无法把子视图超出圆角边框的部分裁切掉。

5,修复了Java到C++到JS ViewManagers的交互问题;

6,修复了DeviceIdentity(设备标识);

ios

修复了React/RCTJavascriptLoader.mm的Content-Type检查问题,在之前RCTJavascriptLoader对Content-Type的支持是有缺陷的,只能匹配application/javascript或text/javascript两种类型,现在的做法是Content-Type对以application/javascript或text/javascript开头的Content-Type都可以支持;

新增功能

0.50版本新增了很多的功能,本文只针对某些重点进行讲解,详细的还请阅读官方资料。通用的功能有:

通用

  • 新增SwipeableFlatList组件,SwipeableFlatList是在FlatList的基础上添加了侧滑显示菜单的功能,类似于侧滑删除的效果。我们知道SwipeableListView,是React Native 0.27上添加的一个支持侧滑显示菜单的ListView,不过ListView已经不推荐使用了。
  • 引入SafeAreaView,SafeAreaView用于包裹其他View,它会自动应用填充布局中不足的一部分,但不包括navigation bars, tab bars, toolbars等视图。

Android

TimePicker

TimePicker添加了mode (enum(‘clock’, ‘spinner’, ‘default’)) 来控制TimePicker的打开模式。

TimePicker是一个老的API了,通过TimePicker组件可以打开Android原生的时间选择对话框。Android 5以下的设备只支持spinner模式,Android 5及以上设备支持clock, spinner两种模式: Android < 5的显示方式如下:

这里写图片描述
这里写图片描述

Android > 5的显示方式如下:

这里写图片描述
这里写图片描述

applicationId

运行在构建的时候指定Android App的applicationId(Android应用的身份ID,应用的唯一标识);

RAM

Added Android support for loading multiple RAM bundles。

iOS方面

DeviceInfo

DeviceInfo 新增DeviceInfo.isIPhoneX_deprecatedAPI来供开发者判断当前设备是不是iPhone X,带有小刘海的iPhone X的屏幕比其他iPhone 手机的屏幕拥有更大高度,所以对于界面布局来说,在iPhone X上需要特别适配。 DeviceInfo是React Native 0.44新增一个类专门提供屏幕尺寸,字体缩放等信息。

Modal组件

Modal组件新增支持onDismiss属性,这个onDismiss接受一个function,当Modal关闭的时候会回调onDismiss。

代码语言:javascript
复制
<Modal
   onDismiss={()=>{
     console.log("Modal is dismiss");
      }
      }
/>

除了上面介绍的更新内容之外,还有很多的东西,这里就不再介绍,大家可以到RN中文网查看相关最新知识。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-01-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Image组件
  • 其他重大变更
  • 修复的系统bug
    • Android
      • ios
      • 新增功能
        • 通用
          • Android
            • TimePicker
            • applicationId
            • RAM
          • iOS方面
            • DeviceInfo
            • Modal组件
        相关产品与服务
        容器服务
        腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档