• 首页
  • 关于
    • 前端行知录 photo

      前端行知录

      前端路漫漫,行知方知行

    • Email
    • Github
  • 文章
    • 所有文章
    • 所有标签
  • 作品

重构 React Native 项目

13 Jun 2016

Reading time ~1 minute

Refactor for ios

原因

  • 目前 React Native 平均两周更新一个版本,项目当前的一些bug可以通过升级解决,同时,新版本也提供了更为丰富的API以及更好的开发、设计体验。
  • 考虑到项目中有很多自定义的组件,若通过传统的方式(react-native init 模板)去升级,每次都要将自定义的组件重新添加,很麻烦。

目标

  • 升级 React Native 版本
  • 变更项目结构,将 React Native 作为项目的依赖,方便后期的版本升级

步骤

新建 native 项目,然后将现有项目作为 view 显示, React Native 作为 CocoaPods 的依赖库引入。

重大变更

  • 从0.18开始, React Native 默认项目全面转向ES6
  • 0.25版本之后,在 React Native 中引用 React 的做法发生了变更
import React, { Component, View } from 'react-native';

应变为

import React, { Component } from 'react';
import { View } from 'react-native';

属于 ‘react’ 的组件:

Children
Component
PropTypes
createElement
cloneElement
isValidElement
createClass
createFactory
createMixin

属于 ‘react-native’ 的组件:

hasReactNativeInitialized
findNodeHandle
render
unmountComponentAtNode
unmountComponentAtNodeAndRemoveContainer
unstable_batchedUpdates
View
Text
ListView
...
and all the other native components.

可以使用 codemod-RN24-to-RN25 自动化重写项目的 imports。

React Native

alcat2008

Dreamer, Practitioner, Incomplete Front-ender

← Jekyll 尝鲜 React & React Native的ES5... →