目录
编辑器
编辑器的详细教程, 可以参考Nuclide Get Started
设置
settings.png
插件
1.png
atom-beautify.png
快捷键
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
更多文章, 请支持我的个人博客
