React Native0.50+开发指导

移动开发 React Native   2017-12-15 16:16:13 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)

概要

本文主要对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"
    />

    React Native0.50+开发指导 - 简书

    slider.png

  • 修复了在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 :

    React Native0.50+开发指导 - 简书

    screen shot 2017-02-14 at 17 05 44

    • 在Android >= 5上:

    spinner :

    React Native0.50+开发指导 - 简书

    screen shot 2017-02-14 at 16 51 17

    clock 也是默认方式:

    React Native0.50+开发指导 - 简书

    screen shot 2017-02-14 at 16 51 02

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

  • Added Android support for loading multiple RAM bundles

iOS方面

  • DeviceInfo 新增 DeviceInfo.isIPhoneX_deprecated API来供开发者判断当前设备是不是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开发的技术干货。

 

来自:http://www.jianshu.com/p/75897271d255

 

扩展阅读

H5、React Native、Native应用对比分析
初窥基于 react-art 库的 React Native SVG
【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
React Native 简单教程
使用 LeanCloud 与 React Native 构建原生应用

为您推荐

一些基础的前端技术面试问题
【译】60个有用CSS代码片段
我的前端故事----React算法又是个什么鬼?
Express入门教程:一个简单的博客
实用的Json工具类(Gson)

更多

移动开发
React Native
ReactNative
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多