React Native开发工具简明教程

目录

• 编辑器

  • 设置

  • 插件

  • 快捷键

• 设备

• 选项

• 调试

编辑器

• 使用ATOM + Nuclide

编辑器的详细教程, 可以参考Nuclide Get Started

设置

settings.png

插件

• Toolbar

• language-babel

• atom-ternjs

• linter

• js-hyperclick

1.png

• atom-beautify

atom-beautify.png

• react-native-snippets

• atom-react-native-css

• atom-react-native-autocomplete

• autocomplete-paths

• file-icons

• vim-mode

快捷键

Atom中最重要也是最常用的快捷键是shift-cmd-p command-palette:toggle

react-native-atom_01.png

• 导航

cmd-\ nuclide-file-tree:toggle

alt-o nuclide-outline-view:toggle

alt-cmd-enter goto-definition:go

• 编辑

cmd-l editor:select-line

shift-cmd-i nuclide-format-js:format

• 查找

cmd-b fuzzy-finder:toggle-buffer-finder

cmd-r symbols-view:toggle-file-symbols

cmd-t nuclide-quick-open:find-anything-via-omni-search

cmd-f nuclide-file-tree:search-in-directory

shift-cmd-f project-find:show

cmd-g find-and-replace:find-next

shift-cmd-g find-and-replace:find-previous

• 书签

cmd-f2 bookmarks:toggle-bookmark

f2 bookmarks:jump-to-next-bookmark

shift-f2 bookmarks:jump-to-previous-bookmark

ctrl-f2 bookmarks:view-all

shift-cmd-f2 bookmarks:clear-bookmarks

• 调试

shift-cmd-a nuclide-debugger:toggle-launch-attach

shift-cmd-y nuclide-debugger:toggle

f8 nuclide-debugger:continue-debugging

f9 nuclide-debugger:toggle-breakpoint

f10 nuclide-debugger:step-over

f11 nuclide-debugger:step-into

设备

• 查看可用设备列表

// iOS
xcrun simctl list devices

// Android
adb devices

• 运行制定模拟器

// iOS
react-native run-ios --simulator "iPhone SE"

// Android
react-native run-android 5d48c9a5

• 实际测试遇到的问题

1: 命令行不能运行真机, 想用真机调试, 需要使用IDE

2: iOS模拟器可以直接通过命令行启动, 而Android模拟器必须事先启动

选项

• 如何开启选项?

在真机中晃动设备, 在模拟器中快捷键是cmd-d(iOS), cmd-m(Android)

react-native-dev-menu-ios.png

react-native-dev-menu-android.png

关于开发选项的详细教程可以参考Debugging React Native Apps

调试

在开发选项中, 选择如下选项

Debug JS Remotely

此时, Atom调试窗被打开

react-native-debug_01.png

如果此时打开的是Chrome浏览器, 而不是Atom调试窗, 那么需要在Atom中先Toggle Debugger

调试的快捷键, 详细参考"快捷键"一节的"调试"

界面调试使用的是React Native Inspector, 打开后可以看到界面元素如下

react-native-debug_02.png

想要了解关于React Native调试的更详细教程, 可以参考Debugger和React Native

更多文章, 请支持我的个人博客