React Native0.50+开发指导
KoreySkutho
6年前
<h2>概要</h2> <p>本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导，希望能对从事React Native开发的你有所帮助：</p> <ul> <li>在兼容性方面新增了对Android8.0、iPhone X的支持；</li> <li>在API方面为TimePicker添加了打开方式的API，另外允许在构建Android项目的时候指定applicationId;</li> <li>在组件方面，新添加了支持侧滑显示菜单的SwipeableFlatList，以及SafeAreaView。</li> <li>修复了一些关键性的Bug；</li> </ul> <h2>特别强调</h2> <ul> <li><code><Image></code> 支持更新，不在支持包裹内容；</li> <li>新增对Android Oreo (8.0)支持；</li> <li>AlertIOS也是支持可以不设置titles了；</li> </ul> <h3>开发指导</h3> <p>React Native 0.50版本中 <code><Image></code> 组件迎来了比较大的一个特性的改变，即在React Native 0.50及以上版本中 <code><Image></code> 不在支持包裹内容。</p> <pre> <code class="language-javascript"><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></code></pre> <p>以上代码在0.50之前是可以正常运行的，在0.50上运行会报：</p> <pre> <code class="language-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.</code></pre> <p>错误。</p> <p>要改为：</p> <pre> <code class="language-javascript"><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></code></pre> <h2>重大变更</h2> <ul> <li> <p><code>ReactShadowNode</code> 由类被抽象成了接口，代替他的是ReactShadowNodeImpl，这是来自底层的变更，对上层API无影响，大家可以忽略。 <a href="/misc/goto?guid=4959755791503078070" rel="nofollow,noindex">(a5d1d25)</a></p> </li> <li> <p><code>enableBabelRCLookup</code> (启用BabelRCL查找)，由原来的默认开启改为了默认关闭，改过之后呢 <code>Metro</code> 只会关注项目的.babelrc文件。在之前 <code>Metro</code> 会关注node_modules下的.babelrc文件，这样将会导致一些问题，因为它没有Babel的版本，也没有 <code>node_modules/randompackage/.babelrc</code> 所需的 <code>plugins/presets</code> 。这样话开发者要解决这一问题则需要删除 <code>node_modules/**/.babelrc</code> ，那么现在好了在从0.50版本之后 <code>getEnableBabelRCLookup</code> 默认返回false，从而避免了这一问题。如果你不想使用这一改变，那么可以这样配置：</p> <p>创建一个 <code>rn-cli.config.js</code> 文件，并添加：</p> <pre> <code class="language-javascript">module.exports = { getEnableBabelRCLookup() { return true; }, };</code></pre> <p>然后，在 <code>node_modules</code> 下修改 <code>.babelrc</code> :</p> <pre> <code class="language-javascript">{"plugins": ["dummy"]}</code></pre> <p>并确保 JS bundle能正常加载它。</p> </li> </ul> <h2>修复的Bugs</h2> <h3>Android方面</h3> <ul> <li> <p>修复了在Android SDK 15及以下版本设置背景的Bug。在Android中设置View的背景在SDK15及以下和以上和的API是不一样的，在之前的RN版本中没有做差异判断，所以会导致在低版本设置背景的Bug，在0.50及以上版本底层实现上添加了 <code>ViewHelper</code> 工具类，当设置背景时会根据当前SDK版本是16及以上或以下进行做不同的处理；</p> <pre> <code class="language-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); } }</code></pre> </li> </ul> <p>}</p> <p>```</p> <ul> <li> <p>修复了slider的 <code>minimumTrackTintColor</code> 和 <code>maximumTrackTintColor</code> 在Android和iOS上颜色颠倒的问题，这是一个比较有意思的Bug：</p> <p>对于如下代码：</p> <pre> <code class="language-javascript"><Slider style={{ width: 300 }} minimumTrackTintColor="red" maximumTrackTintColor="blue" /></code></pre> <p><img alt="React Native0.50+开发指导 - 简书" src="https://simg.open-open.com/show/01f63877b9449c59962b407304e20218.png"></p> <p>slider.png</p> </li> <li> <p>修复了在Android 4.1-4.3 WebView的Bug。</p> <p>在0.50之前的版本当使用WebView的 <code>baseUrl</code> 时在Android 4.1-4.3会显示出html源码，这是因为在Android 4.1-4.3中WebView不支持 <code>text/html; charset=utf-8</code> 的MIME type。</p> </li> <li> <p>修复了View Style的overflow hidden问题。</p> <p>很久以来overflow样式在Android默认为hidden而且无法更改。Android的overflow:hidden还有另外一个问题：如果父容器有borderRadius圆角边框样式，那么即便开启了overflow:hidden也仍然无法把子视图超出圆角边框的部分裁切掉。</p> </li> <li> <p>修复了 <code>Java到C++到JS</code> ViewManagers的交互问题；</p> </li> <li> <p>修复了DeviceIdentity(设备标识)；</p> </li> </ul> <h3>iOS方面</h3> <ul> <li>修复了 <code>React/RCTJavascriptLoader.mm</code> 的 <code>Content-Type</code> 检查问题，在之前RCTJavascriptLoader对 <code>Content-Type</code> 的支持是有缺陷的，只能匹配 <code>application/javascript</code> 或 <code>text/javascript</code> 两种类型，现在的做法是 <code>Content-Type</code> 对以 <code>application/javascript</code> 或 <code>text/javascript</code> 开头的 <code>Content-Type</code> 都可以支持；</li> </ul> <h2>新特性</h2> <h3>通用</h3> <ul> <li> <p>新增SwipeableFlatList组件，SwipeableFlatList是在FlatList的基础上添加了侧滑显示菜单的功能，类似于侧滑删除的效果。</p> <p>我们知道SwipeableListView，是React Native 0.27上添加的一个支持侧滑显示菜单的ListView，不过ListView已经不推荐使用了。</p> </li> <li> <p>引入SafeAreaView，SafeAreaView用于包裹其他View，它会自动应用填充布局中不足的一部分，但不包括navigation bars, tab bars, toolbars等视图。</p> </li> </ul> <h3>Android方面</h3> <ul> <li> <p>TimePicker添加了 <code>mode (enum('clock', 'spinner', 'default'))</code> 来控制TimePicker的打开模式。</p> <p>TimePicker是一个老的API了，通过TimePicker组件可以打开Android原生的时间选择对话框。</p> <p>需要提醒大家的是在Android 5以下的设备只支持 <code>spinner</code> 模式，Android 5及以上设备支持 <code>clock</code> , <code>spinner</code> 两种模式：</p> <ul> <li>在Android < 5上只支持 <code>spinner</code> :</li> </ul> <p><img alt="React Native0.50+开发指导 - 简书" src="https://simg.open-open.com/show/25afca411ca9ccac62a332c62877db1d.png"></p> <p>screen shot 2017-02-14 at 17 05 44</p> <ul> <li>在Android >= 5上:</li> </ul> <p><code>spinner</code> ：</p> <p><img alt="React Native0.50+开发指导 - 简书" src="https://simg.open-open.com/show/27281e80d94bf151ab9f870fe68ad936.png"></p> <p>screen shot 2017-02-14 at 16 51 17</p> <p><code>clock</code> 也是默认方式：</p> <p><img alt="React Native0.50+开发指导 - 简书" src="https://simg.open-open.com/show/f27341a201c2c4bcdd0b55705de232dc.png"></p> <p>screen shot 2017-02-14 at 16 51 02</p> </li> <li> <p>运行在构建的时候指定Android App的applicationId(Android应用的身份ID，应用的唯一标识)；</p> </li> <li> <p>Added Android support for loading multiple RAM bundles</p> </li> </ul> <h3>iOS方面</h3> <ul> <li> <p>DeviceInfo 新增 <code>DeviceInfo.isIPhoneX_deprecated</code> API来供开发者判断当前设备是不是iPhone X，带有小刘海的iPhone X的屏幕比其他iPhone 手机的屏幕拥有更大高度，所以对于界面布局来说，在iPhone X上需要特别适配。</p> <p>DeviceInfo是React Native 0.44新增一个类专门提供屏幕尺寸，字体缩放等信息。</p> </li> <li> <p>Modal组件新增支持 <code>onDismiss</code> 属性，这个 <code>onDismiss</code> 接受一个function，当Modal关闭的时候会回调onDismiss。</p> <p>开发指导：</p> <pre> <code class="language-javascript"><Modal onDismiss={()=>{ console.log("Modal is dismiss"); }} /></code></pre> </li> </ul> <p>以上便是我对React Native 0.50的关键性更新的讲解和开发适配指导，如果你想学习更多关于React Native开发的技巧、经验可以学习我主讲的 <a href="/misc/goto?guid=4959755791595181986" rel="nofollow,noindex"><code>React Native开发视频教程</code> </a>。</p> <p>如果大家在适配Android和iOS中遇到问题可以在本文的下方进行留言，我看到了后会及时回复的哦。</p> <p>另外也可以关注我的 <a href="/misc/goto?guid=4959755791690356500" rel="nofollow,noindex"><code>新浪微博</code> </a>，或者关注我的 <a href="/misc/goto?guid=4959755791796507413" rel="nofollow,noindex"><code>Github</code> </a>来获取更多有关React Native开发的技术干货。</p> <ul> <li>参考： <a href="/misc/goto?guid=4959755791595181986" rel="nofollow,noindex">React Native开发视频教程</a></li> </ul> <p> </p> <p>来自：<a href="http://www.jianshu.com/p/75897271d255?utm_source=tuicool&utm_medium=referral">http://www.jianshu.com/p/75897271d255</a></p> <p> </p>