React Native0.50+开发指导

概要

本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导,希望能对从事React Native开发的你有所帮助:

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

特别强调

  • <Image>支持更新,不在支持包裹内容;
  • 新增对Android Oreo (8.0)支持;
  • AlertIOS也是支持可以不设置titles了;

开发指导

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

<Image style=
       resizeMode="center"
       source=>
    <Text>小黄人</Text>
</Image>

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

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.

错误。

要改为:

<Image style=
       resizeMode="center"
       source=/>
 <Text>小黄人</Text>

重大变更

  • ReactShadowNode由类被抽象成了接口,代替他的是ReactShadowNodeImpl,这是来自底层的变更,对上层API无影响,大家可以忽略。(a5d1d25)
  • enableBabelRCLookup(启用BabelRCL查找),由原来的默认开启改为了默认关闭,改过之后呢Metro只会关注项目的.babelrc文件。在之前Metro会关注node_modules下的.babelrc文件,这样将会导致一些问题,因为它没有Babel的版本,也没有node_modules/randompackage/.babelrc所需的plugins/presets。这样话开发者要解决这一问题则需要删除node_modules/**/.babelrc,那么现在好了在从0.50版本之后getEnableBabelRCLookup默认返回false,从而避免了这一问题。如果你不想使用这一改变,那么可以这样配置: 创建一个rn-cli.config.js文件,并添加: module.exports = { getEnableBabelRCLookup() { return true; }, }; 然后,在node_modules下修改.babelrc : {"plugins": ["dummy"]} 并确保 JS bundle能正常加载它。

修复的Bugs

Android方面

  • 修复了在Android SDK 15及以下版本设置背景的Bug。在Android中设置View的背景在SDK15及以下和以上和的API是不一样的,在之前的RN版本中没有做差异判断,所以会导致在低版本设置背景的Bug,在0.50及以上版本底层实现上添加了ViewHelper工具类,当设置背景时会根据当前SDK版本是16及以上或以下进行做不同的处理; 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); } } }
  • 修复了slider的minimumTrackTintColormaximumTrackTintColor在Android和iOS上颜色颠倒的问题,这是一个比较有意思的Bug: 对于如下代码: <Slider style= minimumTrackTintColor="red" maximumTrackTintColor="blue" />
  • 修复了在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。
  • 修复了View Style的overflow hidden问题。 很久以来overflow样式在Android默认为hidden而且无法更改。Android的overflow:hidden还有另外一个问题:如果父容器有borderRadius圆角边框样式,那么即便开启了overflow:hidden也仍然无法把子视图超出圆角边框的部分裁切掉。
  • 修复了Java到C++到JS ViewManagers的交互问题;
  • 修复了DeviceIdentity(设备标识);

iOS方面

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

新特性

通用

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

Android方面

  • TimePicker添加了mode (enum('clock', 'spinner', 'default')) 来控制TimePicker的打开模式。 TimePicker是一个老的API了,通过TimePicker组件可以打开Android原生的时间选择对话框。 需要提醒大家的是在Android 5以下的设备只支持spinner模式,Android 5及以上设备支持clock, spinner两种模式:
    • 在Android < 5上只支持spinner:
  • 在Android >= 5上:

spinner

clock也是默认方式:

  • 运行在构建的时候指定Android App的applicationId(Android应用的身份ID,应用的唯一标识);
  • Added Android support for loading multiple RAM bundles

iOS方面

  • DeviceInfo 新增DeviceInfo.isIPhoneX_deprecatedAPI来供开发者判断当前设备是不是iPhone X,带有小刘海的iPhone X的屏幕比其他iPhone 手机的屏幕拥有更大高度,所以对于界面布局来说,在iPhone X上需要特别适配。 DeviceInfo是React Native 0.44新增一个类专门提供屏幕尺寸,字体缩放等信息。
  • Modal组件新增支持onDismiss属性,这个onDismiss接受一个function,当Modal关闭的时候会回调onDismiss。 开发指导: <Modal onDismiss={()=>{ console.log("Modal is dismiss"); }} />

以上便是我对React Native 0.50的关键性更新的讲解和开发适配指导,如果你想学习更多关于React Native开发的技巧、经验可以学习我主讲的React Native开发视频教程

如果大家在适配Android和iOS中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。 另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 两分钟带你快速搭建Flutter开发环境(Windows)

    在这篇文章中,将带着大家一起在Windows平台上快速搭建Flutter的开发环境,同时会将搭建Flutter开发环境中的一些技巧和经验分享给大家。

    CrazyCodeBoy
  • Windows平台搭建React Native开发环境

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React N...

    CrazyCodeBoy
  • React Native 开发适配心得

    众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用...

    CrazyCodeBoy
  • React Native 0.50版本新功能简介

    React Native在2017年经历了众多版本的迭代,从本人接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移...

    xiangzhihong
  • 熬过了互联网“寒冬”,接下来的金三银四你该怎么面试进BAT?

    又要交房租了,工资怎么还不发?每个月总觉得钱不够花,工资总是跟不上消费,什么时候能涨个工资呢?

    Android技术干货分享
  • 从0系统学 Android--1.1认识 Android

    默认学习者会简单的 Java 语法!Android 方面完全从零开始!跟着我系统的学习吧!

    开发者
  • 应用迁移至 Android P 操作指南

    Android 开发者
  • 互联网寒冬下那些 Android 开发高手,都在研究什么技术?

    近半年来,很多人都问过我这样的问题。大家对于职业的未来,都有一些迷茫和焦虑,其实我也有,为什么会这样呢?

    Android技术干货分享
  • Android开发方便快捷的8个好工具,你造吗?

    Android是第二个最流行的用于 智能手机和平板电脑 的操作系统。这里有8个最好的 Android工具以许多不同的方式 帮助开发人员 ,例如 - SDK和AV...

    非著名程序员
  • 【新闻】关于Android,让你震惊的一组数字

    image.png 全球Android开发者关注的2014年谷歌(微博)I/O开发大会已经召开,谷歌发布了全新的Android系统——Android L。...

    小莹莹

扫码关注云+社区

领取腾讯云代金券