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={{width: 200, height: 100}}
       resizeMode="center"
       source={{uri: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2950587800,2884409868&fm=27&gp=0.jpg"}}>
    <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={{width: 200, height: 100}}
       resizeMode="center"
       source={{uri: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2950587800,2884409868&fm=27&gp=0.jpg"}}/>
 <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的minimumTrackTintColor 和 maximumTrackTintColor在Android和iOS上颜色颠倒的问题，这是一个比较有意思的Bug：

  对于以下代码：

  <Slider
    style={{ width: 300 }}
    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.mm的Content-Type检查问题，在以前RCTJavascriptLoader对Content-Type的支持是有缺陷的，只能匹配application/javascript或text/javascript两种类型，如今的作法是Content-Type对以application/javascript或text/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开发的技术干货。

• 参考：React Native开发视频教程