Thumb react native shaking 02

React Native:終結 Debug 的雪克人生 ♪

by 陳曉菁 (Kay Chen) 2018-06-08 09:45 UTC

身為一個 React Native 的開發者一定了解在實機測試過程中,可能會認為自己不是在寫 APP 而是在手搖飲料店打工,因為每次做一個段落要看結果,就必須搖動手機召喚 Developer Menu,進行一個重新載入 APP 的動作,由於每隻手機對搖晃的感應不同會影響搖出 Menu 的難易程度,有時候會難搖到讓人想摔手機,而且搖著搖著,接口好像默默地就變鬆了,容易造成接觸不良鬆脫斷線,影響 MAC 和手機間的連線品質,或者是使用平板在作開發的時候,平板的尺寸確實很難搖擺起來,諸多種種確實讓人感到不便,所以接下來介紹個讓 React Native 開發人生變得輕鬆一點的方法。

Android 篇 - 快捷鍵直接召喚 Developer Menu:

1. 設定 Automator Service

打開 MAC 應用程式 (Applications) 中的 Automator,按下視窗左下角的 New Document,然後點選 Service 後,按右下角的 Choose:

applications_automator_service

2. 設定 Run Shell Script

在 Automator 的視窗中,找到搜尋欄,輸入 Run Shell Script,找到這個 Actions,在右邊 Service receives selected 的下拉選單選擇 no input。接著在下方的指令框中輸入:

/usr/local/bin/adb shell input keyevent 82

run_shell_script

如果你的 adb(Android Debug Bridge) 存在別的地方,就必須更改一下指令的路徑。可以在終端機查詢 adb 的位置:

$ which adb => /usr/local/bin/adb

3. 儲存 Service

按下 cmd + s 輸入這個 Service 的名稱並儲存。

4. 啟動 Service

打開 System Preferences (系統偏好設定),進到 Keyboard (鍵盤) 選擇 Shortcuts,然後捲到 General 的分類下找到你剛剛設定的 Service 的名稱,把這個 Service 勾選起來。

5. 設定快捷鍵

點擊二下 Service 名稱右邊的 none,然後按下你想要使用的快捷鍵組合,就是 任一個 cmd / shift / control / option + 1 個字母或數字,不要和其他的快捷鍵設定相衝 (例如: cmd + c ),然後自己按得順手和記得住就可以了。

set_service_shortcut

這樣召喚 Developer Menu 的快捷鍵就設定完成,之後將 APP 佈署到手機上,開發的過程中按下自己設定的快捷鍵就可以呼叫 Developer Menu 進行 Reload 或其他各種設定。

注意事項

  • 這個方法只適用於和 MAC 連接中的 Android 手機
  • 記得要先跑過一次 adb reverse 指令,才能使用快捷鍵 $ adb reverse tcp:8081 tcp:8081
  • 必須在有提供 Services 的應用程式才能使用快捷鍵
    • 點擊應用程式名稱,列表中有 Services,可以查看裡面可以使用的 Service。
  • 只在特定應用程式中使用 Service 快捷鍵
    • 在一開始 Automator 設定中,Service receives 如果是選擇 any application,在有提供 Services 的應用程式中都能用快捷鍵進行呼叫 Developer Menu,不過在某些應用程式中還是有可能失效。如果這邊選擇了某一個特定的應用程式,就表示設定的 Service 只在那個應用程式中可以使用。

service_receives_application

iOS 篇 - 多點觸控招召喚 Developer Menu:

iOS 目前的了解是還無法支援快捷鍵呼叫 Developer Menu,把二、三萬的 iPhone 拿來雪克萬一手滑也是挺讓人痛心的,說不定一個剛好螢幕就裂了呢 (笑),iOS 這邊不能只好讓 React Native 那邊想想辦法,生命總是會找到出口的 ♥ 接下來只要在專案最初開始的檔案 EX: index.js 加入幾行的程式碼,利用多點觸控做為事件觸發一樣可以把 Developer Menu 叫出來唷!

import React, {Component} from 'react';
import {
    AppRegistry,
    View,
    PanResponder,
    NativeModules
} from 'react-native';
import App from './src/native/app.native'

export default class devMenuEverywhere extends Component {
  DevMenuTrigger = (children) => {
    const {DevMenu} = NativeModules;
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => {
        if (gestureState.numberActiveTouches === 3) {
          DevMenu.show();
        }
      },
    });
    return <View style={{flex: 1}} {...panResponder.panHandlers}>{children}</View>
  };

  render() {
    return (
      this.DevMenuTrigger(<App/>)
    );
  }
}
AppRegistry.registerComponent('reactNativeEverywhere', () => devMenuEverywhere);

以上加完之後,在 iPhone 上使用三點觸碰就能開啟 Developer Menu,不必再把 iPhone 放在空中甩,真是一件好事 :)


原文:React Native: Stop Shaking Your Phone!

作者:Jesse Sessler

REF:Open iOS Developer Menu programmatically / command

«回文章列表