ฉันจะ "เขย่า" อุปกรณ์ Android ภายในตัวจำลอง Android เพื่อเปิดเมนู dev เพื่อดีบักแอป React Native ของฉันได้อย่างไร

ฉันกำลังทำงานกับแอพมือถือ React Native สำหรับข้ามแพลตฟอร์ม ฉันกำลังเขียนคำสั่ง console.log เมื่อฉันพัฒนา ฉันต้องการดูงบการบันทึกเหล่านี้ใน Chrome ในขณะที่ฉันใช้งานแอพ Android ใน Android emulator เริ่มต้น ตามเอกสารของ Facebookฉันแค่ต้อง "เขย่าอุปกรณ์" ฉันจะทำสิ่งนี้ในโปรแกรมจำลอง Android ได้อย่างไร

วิธีเข้าถึงเมนูผู้พัฒนาในแอป:

บน iOS เขย่าอุปกรณ์หรือกดควบคุม + ⌘ + z ในตัวจำลอง บน Android เขย่าอุปกรณ์หรือกดปุ่มเมนูฮาร์ดแวร์ (พร้อมใช้งานบนอุปกรณ์เก่า> และในตัวเลียนแบบส่วนใหญ่เช่นในจีโนมคุณสามารถกด⌘ + m เพื่อ> จำลองปุ่มเมนูฮาร์ดแวร์คลิก)

ภายในแอพของคุณใน Android Emulator กดCommand + Mบน OSX หรือCtrl + Mบน Linux และ Windows

ด้วย React Native ที่ทำงานในอีมูเลเตอร์,
กดctrl+ m(สำหรับ Linux ฉันคิดว่ามันเหมือนกันสำหรับ Windows และ⌘+ mสำหรับ Mac OS X) หรือเรียกใช้สิ่งต่อไปนี้ในเทอร์มินัล:

adb shell input keyevent 82

หากคุณกำลังใช้อีมูเลเตอร์ใหม่ที่มาพร้อมกับ Android Studio 2.0 แป้นพิมพ์ลัดสำหรับปุ่มเมนูคือ Cmd + M เหมือนใน Genymotion

หรือคุณสามารถส่งกดปุ่มเมนูโดยใช้adbในเทอร์มินัล:

adb shell input keyevent KEYCODE_MENU

โปรดทราบว่าทางลัดของปุ่มเมนูไม่ได้เป็นข้อกำหนดที่เข้มงวด แต่เป็นเพียงพฤติกรรมเริ่มต้นที่จัดทำโดยReactActivityคลาส Java (ซึ่งจะใช้เป็นค่าเริ่มต้นหากคุณสร้างโครงการด้วยreact-native init) นี่คือรหัสที่เกี่ยวข้องจากonKeyUpในReactActivity.java:

if (keyCode == KeyEvent.KEYCODE_MENU) {
  mReactInstanceManager.showDevOptionsDialog();
  return true;
}

หากคุณเพิ่ม React Native ลงในแอปที่มีอยู่ ( เอกสารที่นี่ ) และคุณไม่ได้ใช้ReactActivityงานคุณจะต้องขอปุ่มเมนูขึ้นในทำนองเดียวกัน นอกจากนี้คุณยังสามารถโทรReactInstanceManager.showDevOptionsDialogผ่านกลไกอื่น ๆ ตัวอย่างเช่นในแอปที่ฉันใช้งานอยู่ฉันเพิ่มรายการเมนูแถบเครื่องมือแบบ dev-only ที่แสดงเมนูเนื่องจากฉันพบว่าสะดวกกว่าการเขย่าอุปกรณ์เมื่อทำงานกับอุปกรณ์ทางกายภาพ

'Ctrl + m' ทำงานได้กับ Windowsในโปรแกรมจำลอง Android เพื่อแสดงเมนูนักพัฒนา React-Native

ไม่พบเอกสารที่ใดก็ได้ พบทางของฉันที่นี่เดาส่วนที่เหลือ ... ความเศร้าโศกที่ดี

โดยวิธีการ: OP: คุณไม่ได้พูดถึงระบบปฏิบัติการที่คุณใช้

สำหรับ Linux คุณคลิกที่จุดสามจุด "... " ข้างตัวจำลองบนเซนเซอร์เสมือนให้ตรวจสอบ "ย้าย" จากนั้นลองย้ายพิกัด x, y หรือ z อย่างรวดเร็ว

'Command + M' สำหรับ OSX ใช้งานได้สำหรับฉัน

ฉันอยู่บน Mac OS ดังนั้นเมื่อฉันกด Command มันเปิดใช้งานตัวเลือกการซูม นี่คือทางออกของฉัน

• เปิดหน้าต่างการตั้งค่าคอนฟิก [... ]
• ไปที่Settingsแท็บ -> Generalแท็บ -> Send keyboard shortcuts toฟิลด์
• เปลี่ยนค่าVirtual device"เป็นตามที่แสดงในภาพ

หลังจากนั้นโฟกัสไปที่ตัวจำลองและกด Command + M เมนู dev จะปรากฏขึ้น

ใช้command + m(cmd + M)บน MAC และmake sure that you are accessing your application while you try to access the Debug Menuนั่นคือแอปของคุณจะต้องทำงานมิฉะนั้นCmd + Mจะส่งคืนเมนูโทรศัพท์ธรรมดาตามปกติ

ในขณะที่การพัฒนาตอบสนองแอพพื้นฐานเราเล่นกับเทอร์มินัลมากมาย

ดังนั้นฉันจึงเพิ่มสคริปต์ในสคริปต์ในไฟล์package.json

"menu": "keybent input adb เชลล์ของ 82"

และฉันกดปุ่มเมนูเส้นด้าย

เพื่อให้เมนูปรากฏบนอีมูเลเตอร์มันจะส่งต่อคีย์โค้ด 82 ไปยังอีมูเลเตอร์ผ่าน ADB ไม่ใช่วิธีที่ดีที่สุด แต่ฉันชอบและรู้สึกว่าจะแบ่งปันมัน

บน linux ctrl + m ควรใช้งานได้ แต่ไม่สามารถแก้ปัญหาได้ให้คลิกที่ (... ) (ส่วนขยายที่ขยาย) แล้วปิด window.now คุณสามารถเปิดเมนูด้วย ctrl + m แล้ว:

1. คลิกที่ (... ) (ส่วนควบคุมเพิ่มเติม)

2. ปิดการควบคุมแบบขยาย

3. Ctrl + M

อาจไม่ใช่วิธีแก้ปัญหาโดยตรง แต่ฉันได้สร้าง lib ที่ให้คุณใช้ 3 นิ้วสัมผัสแทนการสั่นเพื่อเปิดเมนู dev เมื่ออยู่ในโหมดพัฒนา

https://github.com/pie6k/react-native-dev-menu-on-touch

คุณจะต้องห่อแอพของคุณภายใน:

นำเข้า DevMenuOnTouch จาก 'react-native-dev-menu-on-touch'; // หรือ: นำเข้า {DevMenuOnTouch} จาก 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

มันมีประโยชน์จริง ๆ เมื่อคุณต้องตรวจแก้จุดบกพร่องบนอุปกรณ์จริงและคุณมีเพื่อนร่วมงานนั่งถัดจากคุณ

ฉันกำลังลองรุ่นวางจำหน่ายผ่านทางadb install -r -d <app-release>.apk🤦

ตรวจสอบให้แน่ใจว่าคุณใช้งานบิลด์ debugจากนั้นเมนูจะทำงานผ่านทางลัดหรือ CLI

สำหรับแล็ปท็อป windows fn Key + Control + m