react-native实践

发表于

react-native

记录 react native 开发过程的种姿势和 bug 收集

欢迎反馈和 bug 提供

项目地址，官方环境开发体验

tools

  • react-native-cli，官方推出创建项目的工具（自带 Watchman 依赖，不行另行安装）。
  • create-react-native-app，是由 Facebook 和 Expo 联合开发用于快速创建项目的工具，特点无需用户再按装 adroid sdk 和 xcode。需要搭配 Expo 开发的工具 xde 客户端使用。
  • Node。
  • Yarn，包管理器，如同 Npm。
  • Nuclide，集成集成环境，可用于编写，运行和测试应用。
  • Watchman，监视文件系统变更工具。

开发搭配

  • 官方：react-native-cli（创建项目），Yarn（包管理器），Watchman（文件变更工具），flow，Node（环境）。
  • expo：create-react-native-app（创建项目），Expo XDE（命令行工具与发布工具，同时支持使用内部模拟器），Expo（手机预览 app），Exp（node，编译，可选择）。
  • 开发 and 打包工具：ios（Xcode,simulation），android（andorid-sdk,android-ndk,java,geymotion）。
  • 编辑器：vscode（推荐），vscode-react-native-tool（集成插件）。

vscode

  • vscode-react-native-tool，提供了一个开发环境，调试，运行，react-native 相关操作命令。
  • path Intellisens 文件路径提示补全。
  • Auto Close Tag 自动闭合标签。
  • Auto Rename Tag 自动重命名标签。
  • react-native-react-redux-snippets-for-es6-es7 代码片段。
  • vscode-language-babel 语法高亮。
  • vscode-react-native-tool 的 salsa 代码提示功能未能启用（估计操作姿势有问题），使用 typescript，typings 代替使用。
1
2
3
4
5
6
7
8
npm install typescript@next -g
// 先全局安装typescript，如何修改vscode配置，手动指定路径。
// --> "typescript.tsdk"：typescirpt安装的路径
npm install typings --global
// 全局安装typings, 智能提示功能
typings install dt~react-native --save
// 在项目的根目录运行
// end 重启

debug

run ios

  • 预先编译要对其开发的平台，如 ios 就需要 xcode 上编译并在设备或者模拟器运行。后续开发不需要再次编译，可以直接类似开发运行开发，除了对 ios 相关有代码功能才需要编译。
  • 使用 vscode reactnative-tools 插件 run ios 运行模拟器上，前提电脑需要安装 xcode。

debugger

  • npm start 运行下在模拟器 command + d，选择 Debug JS Remotely 开启 debug 功能，在 Chrome 上 debugger 调试。
  • 使用 vscode reactnative-tools 插件 start packager 运行下，在 vscode debugger 功能选项下添加配置 react native: debug ios 或者 react native: debug android，选择对应的平台，点击进行调试。如何在模拟器 command + d，选择 Debug JS Remotely 开启 debug 功能。（推荐，比较方便直接在代码上打断点）。

redux tools

使用 redux-devTools 工具调试 redux。
app 开发和 web 开发在使用 redux-devTools 工具上是不一样，需要远程支持的。安装remote-edux-devTools，remotedev-server，建议在 package.json 上添加“remotedev –hostname=localhost –port=5678”次命令，方便快速启动，另外代码添加

1
2
3
4
5
6
7
8
9
10
11
...
import { composeWithDevTools } from 'remote-redux-devtools';
...

...
const composeEnhancers = composeWithDevTools({ realtime: true, port: 5678, hostname: 'localhost' });
...

...
createStore(reducers,initialState, composeEnhancers());
...

其中代码中的 5678 端口必须和添加 script 命令中的端口配置一致。启动 redux-devTools 的 remote 功能，把端口等配置输入即可。

components

bug

  1. react-native 0.47.1，使用 redux-saga，需要修改 babel-preset-react-native 文件/config/main.js 中’babel-preset-transform-regenerator’，建议注释掉。