Google Blog 10/14/2016 (a.m.)

• oblador/react-native-vector-icons: 3000 Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full stying.

  • default icon (similar to TabBarIOS.Item icon) None  selectedIconName Name of the selected ico

• [翻译] React.createClass 对比 extends React.Component

  • 基于 ES6 的小小语法糖，我们还可以通过 extends React.Component 来创建组件
  • 使用 React.createClass 方法来创建组件是以往的传统
  • 通过继承 React.Component 代替直接调用 React.createClass 的方式
  • React mixins 的特性将不能被使用
  • Facebook 建议在 ES6 的类有完整支持时将 React.createClass 完全移除

• 使用链接库 - react native 中文网

  • 并不是所有的APP都需要使用全部的原生功能，包含支持全部特性的代码会增大应用的体积
  • 在这种思想下，我们把许多特性都发布成为互不相关的静态库
  • 大部分的库只需要拖进两个文件就可以使用了
  • 提供原生依赖的自动链接
  • 现在所有的原生依赖都成功地链接到你的iOS/Android项目

• 手势响应系统 - react native 中文网

  • 具体的实现在ResponderEventPlugin.js文件中，你可以在源码中读到更多细节和文档
  • • 反馈/高亮 —— 让用户看到他们到底按到了什么东西，以及松开手后会发生什么。
     
    • 取消功能 —— 当用户正在触摸操作时，应该是可以通过把手指移开来终止操作。
  • 如果要做一个按钮或者网页链接，那么使用TouchableHighlight就可以

• 特定平台代码 - react native 中文网

  • 最直接的方案就是把组件放置到不同的文件夹
  • 在组件的文件命名上加以区分
  • React Native会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前运行的平台加载正确对应的文件
  • Platform.select()，它可以以Platform.OS为key，从传入的对象中返回对应平台的值
  • 可以直接用它针对不同平台返回不同的组件
  • 只有一小部分代码需要依据平台定制，那么这个模块就可以派上用场
  • 检测当前所运行的Android平台的版本

• react native 中文网

  • iOS和Android都可以使用
  • 只能使用苹果开发好的动画和行为
  • •  
       
     
    • 只支持iOS

• 性能 - react native 中文网

  • 使用React Native替代基于WebView的框架来开发App的一个强有力的理由，就是为了使App可以达到每秒60帧（足够流畅），并且能有类似原生App的外观和手感
  • iOS设备提供了每秒60的帧率，这就留给了开发者和UI系统大约16.67ms来完成生成一张静态图片（帧）所需要的所有工作。如果在这分派的16.67ms之内没有能够完成这些工作，就会引发‘丢帧’的后果，使界面表现的不够流畅
  • 只要卡顿超过100ms，用户就会明显的感觉到
  • 控制台打印语句可能会极大地拖累JavaScript线程
  • 发布应用前请务必仔细检查，确保全部移除
  • JavaScript线程的性能在开发模式下是很糟糕的
  • 可以设置initialListSize为1
  • 每帧所显示的行数由pageSize所决定
  • 0.14版本后默认为true
  • 在iOS上，你需要确保在行容器上设置了overflow: hidden
  • 你必须提供一个rowHasChanged函数，它通过快速的算出某一行是否需要重绘
  • 如果你没有需要移动这个视图的需求，请关闭这一属性
  • 当你点击一个图片，要将它放大到全屏的时候，就可以使用这个属性
    • transform: [{scale}]

• 图片 - react native 中文网

  • Packager就会根据平台而选择不同的文件
  • 为不同的屏幕精度提供图片
  • equire中的图片名字必须是一个静态字符串
    • var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
  • 与静态资源不同的是，你需要手动指定图片的尺寸
    • 从网络中获取的图片需要指定尺寸
  • 挑出最合适的尺寸显得尤为重要
  • iOS会为同一张图片在相册中保存多个不同尺寸的副本
  • 这一切过程都是自动完成的
  • 从已经打包好的应用资源文件中读取图片（使用require('image!x')语法）则无需指定尺寸
  • 把src属性改为了source属性，而且并不接受字符串，正确的值是一个带有uri属性的对象
  • 在React Native中，图片解码则是在另一线程中完成的
  • web上这是页面掉帧的一大因素，因为解码是在主线程中完成的

Posted from Diigo. The rest of my favorite links are here.