Cách phát triển ứng dụng React Native iOS trong Windows với Hackffy (tốt, sắp xếp)

Xin chào vừa! Vì vậy, đây là câu chuyện đầu tiên của tôi, nhưng tôi muốn đi thẳng vào trò chơi.

Tôi đã thất vọng khi tôi yêu cầu một máy Mac và iPhone vật lý để phát triển iOS React Native.

Ý tôi là, tôi có MacBook và iPhone, tôi có nó. Và tôi đã phải chia sẻ repo của mình với MacBook của mình sau đó chạy React Native Builder và React Native Packager, điều này khá dài dòng và khập khiễng. Boo.

Ngoài ra, tôi muốn làm việc trong một máy trạm, tôi có một máy trạm Xeon và nó buồn tôi phải nói lời tạm biệt với bàn phím và chuột của tôi và từ đó tạm biệt năng suất.

Ngay cả Xamarin cũng cung cấp một Trình mô phỏng và xây dựng iOS từ xa để chúng tôi có thể tận hưởng việc phát triển trên PC chính của mình và sau đó đẩy mạnh việc xây dựng trên môi trường Mac từ xa của chúng tôi. Và tôi nghi ngờ nhóm RN sẽ dễ dàng thực hiện điều đó.

Vì vậy, tôi đã vắt kiệt một phần sức mạnh não bộ của mình và cuối cùng đã đưa ra một giải pháp, đó là rất, rất lập dị, điên rồ và lười biếng. Và ở đây, những điểm mà tôi đã nghĩ đến:

The Good 1: Nó hoạt động phổ biến, trong mọi PC x86_64 bit có bật Virtualization, với điều kiện bạn đã làm theo các bước rõ ràng.

The Good 2: Bạn có thể xử lý môi trường dễ dàng. Bạn cũng có thể nhân bản một môi trường và di chuyển nó đến một nơi khác.

The Bad 1: Nó, Chỉ, Hoạt động!

The Bad 2: I Don mệnh khuyên bạn nên chạy bất kỳ chương trình Mac nào khác ngoài XCode.

The Bad 3: Donith hy vọng CPU AMD sẽ chạy nhiều hơn thế này.

The Ugly 1: Bạn cần một PC cực kỳ mạnh mẽ, quái dị cho điều đó, để có được chỉ một phần hiệu suất trên máy Mac thực sự.

The Ugly 2: Không có khả năng tăng tốc phần cứng, vì vậy, don hy vọng sẽ chạy và gỡ lỗi bối cảnh OpenGL ES với nó.

Nếu bạn là một người đàn ông thực thụ, hãy lấy máy Mac. Nếu không, bây giờ chúng tôi sẽ khám phá hành trình đến Hack-in-to-sh!

. bất cứ điều gì với máy tính của chúng tôi, bao gồm cài đặt các hệ điều hành khác nhau, vì vậy hãy tự chuẩn bị và quyết định xem bạn có muốn tiếp tục bước vào vùng màu xám hợp pháp không)

Điều kiện tiên quyết

Như tôi đã đề cập trước đây, bạn thực sự cần một PC rất mạnh và mạnh! Tôi có một máy trạm Xeon, nhưng nó hầu như không chạy tốt, hãy tưởng tượng cơn ác mộng đó là gì để khiến nó hối hả, nhỉ?

Ngoài ra, bạn cần một ổ SSD, trừ khi bạn có đủ kiên nhẫn để chờ hơn 5 phút để vào Mac VM bằng ổ cứng.

Đợi tí! VM. Máy ảo Hmm hở? Bạn có đoán được nó không? Đúng vậy, chúng tôi sẽ cần VMWare cho việc này.

Bước 1: Lấy hình ảnh cài đặt Mac

Chà, nếu không có điều này, chúng tôi sẽ có thể làm bất cứ điều gì

Nếu bạn có một người bạn có máy Mac, hãy mượn máy của anh ấy hoặc cô ấy

Tải xuống macOS Sierra từ App Store

Lên mạng và tìm nghi thức xé hình ảnh cài đặt đó thành dạng DMG / ISO di động.

Tôi sẽ tiết lộ phương pháp như vậy, vì tôi không muốn gặp rắc rối ~ \ _ (ツ) _ /

Chuyển tệp DMG / ISO cuối cùng sang PC chính của bạn. Tất nhiên chúng tôi sẽ cần nó, hoặc chúng tôi như thế nào

Bước 2: Tải xuống VMWare Player

Trừ khi bạn có VMWare Workstation, mà hầu hết chúng ta đều không thể, thì chúng ta sẽ phải tiến hành tải xuống VMWare Player.

Chỉ cần cài đặt nó. Nên không có vấn đề gì cả.

Bước 3: Tải về Unlocker

Được rồi, đây là lần hack đầu tiên của chúng tôi.

Về cơ bản, VMWare đã khóa các tùy chọn thiết yếu ngăn OSX và EFI chạy và hợp tác với nhau (mã cứng, nối tiếp, SMB, v.v.) chạy trên mọi phiên bản máy ảo trên tất cả các trình ảo hóa VMWare trừ VMWare Fusion.

Vì vậy, chúng tôi sẽ phải ‘mở khóa cho nó bằng cách vá một vài thứ để Hack Hack hoạt động.

Sau khi tải xuống các tệp bằng cách nhấp vào ‘Sao chép hoặc tải xuống, giải nén tệp, tìm các tệp có tên‘ win-install.cmd, và ‘win-update-tools.cmd.

Nhấp chuột phải vào ‘win-install.cmd, và chọn‘ Chạy với tư cách Quản trị viên, cũng như vậy ‘win-update-tools.cmd. Điều này là bắt buộc để có quyền truy cập vào Windows Registry và dừng các dịch vụ VMWare để thực hiện vá lỗi.

Bước 4: Tạo một máy ảo mới

Mở Trình phát VMWare của bạn và ngay trong menu chọn Tạo Máy ảo mới.

Sau đó chọn tệp hình ảnh đĩa cài đặt mà bạn vừa chuyển trước đó.

Sau đó, chúng tôi sẽ cần phải chọn ‘Apple Mac OS X, và chọn phiên bản phù hợp. Ví dụ, ở đây, tôi sử dụng macOS Sierra, vì vậy đó là ‘macOS 10.12 ', nếu bạn sử dụng El Capitan hoặc Yosemite, hãy chọn phiên bản phù hợp.

Đi qua tất cả các tùy chọn. Hãy nhớ cấu hình máy ảo của bạn, tôi đã thay đổi số lượng lõi, nhưng hầu hết thời gian đều ổn cho khối lượng.

Bước 5: Sửa đổi tệp .vmx

Chúng tôi sẽ phải đi xung quanh giới hạn được áp đặt bởi VMWare mà tôi đã đề cập trong Bước 3. Chúng tôi sẽ phải thêm một mục vào tệp cấu hình máy ảo. Hoặc bạn sẽ phải đối mặt với kết xuất lõi trong quá trình khởi chạy VM.

Theo mặc định, nó nằm trong ~ / Tài liệu / Máy ảo / / .vmx, nếu bạn đã thay đổi vị trí.

Mở nó và thêm văn bản sau vào cuối tập tin:

smc.version = Sau 0

Bước 6: Khởi động tôi

Whew, thật là một công việc khó khăn ở đây. Bây giờ nó thời gian để cài đặt làm việc.

Nếu bạn khởi động tôi, tôi sẽ không bao giờ dừng lại

Không nên có vấn đề gì cả. Bạn sẽ có thể thấy Logo Apple lạ mắt.

(YMMV)

Và màn hình lựa chọn ngôn ngữ.

Màn hình lựa chọn ngôn ngữ

Chọn ngôn ngữ của riêng bạn. Sau đó, chúng tôi sẽ phải bấm vào Tiện ích-> Tiện ích đĩa. Định dạng đĩa ảo thành HFS.

Xem video làm như vậy: https://puu.sh/w46Pj/a5a7f8ff5d.webm

Sau đó chúng ta có thể tiến hành cài đặt nó. Thông thường, sẽ mất khoảng 20 phút-ish để làm điều đó. Trong thời gian chờ đợi lâu, hãy chuẩn bị và lấy cho mình một tách cà phê và đợi cho đến khi kết thúc. Khởi động lại tự động được lên lịch sau khi kết thúc và bạn sẽ thấy màn hình chào mừng.

Xem trong hành động: https://puu.sh/w46Pw/519687fc0d.webm

Bước 7: Thiết lập cho tôi

Màn hình chào mừng

Hoàn thành nó như bạn thường làm với một máy Mac mới. Mặc dù Don Don cho phép dịch vụ định vị và đăng nhập don ID vào Apple ID. Don Tiết không gửi dữ liệu cho Apple cũng như để tăng khả năng che giấu thiết lập Hackffy của chúng tôi.

Chúng tôi sẽ phải cài đặt VMWare Tools. Ngắt kết nối ổ đĩa OSX Base System của bạn trong công cụ tìm. Sau đó nhấp vào Trình phát-> Quản lý-> Cài đặt Công cụ VMWare. Bằng cách cài đặt này, bạn có được một hiệu suất rất lớn, nhưng vẫn hầu như không chạy trong mắt chúng ta.

Xem điều này: https://puu.sh/w4a2m/314480bc99.webm

Xin chúc mừng! Bây giờ bạn đã có một máy ảo Hackffy đầy đủ chức năng trong tay! Bây giờ chúng tôi sẽ chuyển sang phần phát triển

Chúng tôi sắp sửa thiết lập một số phần mềm cần thiết cho bên Hackffy của chúng tôi

Chúng tôi cần

Bia. Tất nhiên. Đối với NodeJS và NPM và React Native.

Sợi để tăng tốc thời gian cài đặt gói của chúng tôi trừ khi bạn sử dụng chia sẻ nó như tôi làm.

Xcode để biên dịch React Native Host.

Bước 1: Cài đặt Xcode

Bạn đã yêu cầu ID Apple cho việc này, không phải nhà phát triển, thông thường cũng không sao.

Xem video:

https://puu.sh/w4b8y/665e3fa868.webm

https://puu.sh/w4b8t/07ceee8b38.webm

Đợi đến khi nó kết thúc. Nên mất quá nhiều thời gian, bạn có thể truy cập Internet có dây NAT. Bạn có muốn chơi Safari hoặc một số ứng dụng khác không? (Mặc dù hiệu suất khủng khiếp)

Bước 2: Cài đặt Brew và Node (và Sợi và RN)

Nhấp vào liên kết ở trên để nhận lệnh đầu tiên.

Vâng, điều này nên được dễ dàng. Do bạn đã cài đặt VMWare Tools, bảng tạm theo mặc định là hai chiều, do đó bạn có thể sao chép nó vào phía Windows của mình và chuyển nó sang phía Mac.

Mở terminal và dán lệnh do Brew đưa ra. Nhập mật khẩu của bạn để cho phép cài đặt. Tất cả sẽ được tự động hóa và sẽ diễn ra trong vòng chưa đầy 10 phút.

Lấy ví dụ này làm ví dụ: https://puu.sh/w4atb/acbf000b84.webm

(Nhấn WinKey + Space để mở tìm kiếm Spotlight, Nhấn WinKey + V để dán)

Cài đặt Node và NPM:

$ brew cài đặt nodejs

https://puu.sh/w4aOv/f6b6e35234.webm

Cài đặt sợi:

$ brew cài đặt sợi

https://puu.sh/w4aOb/0eb124b1d5.webm

Cài đặt RN:

$ npm -g cài đặt Reac -igen-cli

https://puu.sh/w4aSC/5524d0705b.webm

Bước 3: Nhận dự án của bạn

Hiện tại, tôi đã không sao chép repo ban đầu của mình, nhưng tôi đã tạo một dự án RN mới thay thế. Nếu bạn chuyển dự án của bạn, bạn có mọi thứ được thiết lập hoàn hảo.

Bạn có hai cách để chạy dự án của bạn; Phương pháp 1: Chuyển đến thư mục dự án của bạn, nhấp vào ios, mở xcodeproj, nhấp vào nút chạy trong Xcode IDE; Cách 2: Chuyển đến thư mục dự án của bạn trong terminal, nhập ‘Reac -igen run-ios, và poof, nó đã hoàn thành.

Bước cuối cùng: Chạy giả lập

Sự thành công! Nó chạy hoàn hảo! Yay!

Bạn có thể thử bật tải lại nóng, sửa đổi một số mã và xem nếu nó thay đổi.

Sau đó, mọi thứ nên hoạt động như một lá bùa!

Hoan hô! (Hãy nhớ, Phím lệnh == Phím Windows)

Tôi đã cố gắng chạy bản thân trên các thiết bị vật lý, nhưng trên lý thuyết bạn chỉ cần sử dụng USB và Xcode hoặc iTunes sẽ có thể nhận ra thiết bị của bạn.

Vì vậy, hãy để một mình tính hợp pháp ở giữa, tôi nghĩ rằng Hackffy này là một bản hack khá lạ mắt để phát triển iOS trong Windows mà không cần mua Mac Pro / MacBook Pro quá đắt.

Một số người thậm chí có thể cài đặt một bản phân phối Hackffy thực tế vào phần cứng kim loại trần như vào các ultrabook đó, Dell XPS 15 hoặc ZenBook, theo cách đó có thể đạt được điều tương tự, nhưng nó nguy hiểm hơn và bạn mất môi trường Windows (trừ khi bạn bật tính năng khởi động kép - Hầu hết chúng ta không).

Tôi mong muốn được thấy nhóm RN phát hành bộ công cụ mới cho các nhà phát triển Mac / Windows để có trải nghiệm phát triển tốt hơn trong khi vẫn sử dụng các công cụ thoải mái nhất của riêng chúng tôi. Họ nói rằng đó là một ý tưởng thú vị và đang chờ PR.

Tôi nghi ngờ đây là câu trả lời của tôi cho điều này. Dù sao, cảm ơn bạn đã đọc bài viết này (giống như một hướng dẫn). Chắc chắn sẽ dễ dàng hơn, nếu bạn có sự hào phóng để chia sẻ ý tưởng của mình, xin vui lòng làm như vậy trong phần bình luận, tôi mong được thấy phản ứng của bạn. Chúc một ngày tốt lành với những bản hack của tôi!

(Chỉnh sửa vào ngày 13/1)

Lời chào hỏi! Tôi đoán đã lâu rồi kể từ khi tôi viết bài này. Bây giờ, tôi đã phát hiện ra một thế giới hoàn toàn mới liên quan đến việc phát triển ứng dụng di động trong Hackffy VM. Nhờ vào sự tiến bộ gần đây của React Native và bằng cách khai thác Expo và kết nối chỉ dành cho máy chủ, chúng tôi có thể có một môi trường phát triển ngọt ngào hơn để cuối cùng bạn có thể lựa chọn IDE và máy chủ gói được lưu trữ trong Windows.

Điều này sẽ ghi đè Bước 3 trong hướng dẫn tôi đã đề cập ở trên. Tôi cũng sẽ giới thiệu cho bạn thêm một mẹo nữa để làm cho VM hoàn toàn đắm chìm vào sự phát triển của iOS.

Về cơ bản, bạn chỉ cần CRNA và phiên bản mới nhất của Expo / React Native (nói về 0,52 trong thời gian viết), đó là điều đó. Nếu bạn có một ứng dụng hiện có được khởi động theo CRNA, nó cũng có thể hoạt động hoàn hảo.

Nó rất đơn giản. (Tôi giả sử bạn sẽ sử dụng Sợi, tương tự như NPM) Khởi động trình đóng gói CRNA của bạn trong Windows, sử dụng PowerShell hoặc CMD:

Windows $ sợi chạy bắt đầu
...
Để xem ứng dụng của bạn với tải lại trực tiếp, hãy trỏ ứng dụng Expo vào mã QR này.
Bạn sẽ tìm thấy trình quét QR trên tab Dự án của ứng dụng.

Hoặc nhập địa chỉ này vào thanh tìm kiếm của ứng dụng Expo:
exp: // : 19000
Điện thoại của bạn sẽ cần phải ở trên cùng một mạng cục bộ với máy tính này.
Để biết các liên kết để cài đặt ứng dụng Expo, vui lòng truy cập https://expo.io.
Nhật ký phục vụ ứng dụng của bạn sẽ xuất hiện ở đây. Nhấn Ctrl + C bất cứ lúc nào để dừng lại.
Cấm Bấm a để mở thiết bị Android hoặc trình giả lập.
 Bấm vào q để hiển thị mã QR.
 Bấm vào r để khởi động lại packager hoặc R để khởi động lại packager và xóa bộ nhớ cache.
 Bấm vào d để chuyển chế độ phát triển. (chế độ hiện tại: phát triển)

Đây sẽ là cổng chúng tôi đang sử dụng.

Sau đó, thử và tìm địa chỉ máy chủ của bạn. (Máy khác nhau có IP, YMMV khác nhau)

OSXVM $ ifconfig
...
vi0: flags = 8863  mtu 1500
tùy chọn = b 
ether 00: 0c: 29: a1: d7: 8e
inet6 fe80 :: cfe: e149: 421e: 601a% en0 tiền tố 64 phạm vi bảo mật 0x4
inet 192.168.67.128 netmask 0xffffff00 phát 192.168.67.255
tùy chọn nd6 = 201 
phương tiện: tự động chọn (1000baseT )
Trạng thái: Đang hoạt động

Đối với tôi, đây là địa chỉ máy chủ. Nhưng bạn cần loại bỏ byte cuối cùng và nối thêm 1.

Vậy IP máy chủ ở đây là 192.168.67.1. Hãy ghi chú lại trước.

Sau đó, chúng tôi sẽ kích hoạt nước sốt bí mật được thực hiện bởi các kỹ sư của Apple.

Bắt đầu từ XCode 9, bằng cách tạo một thư mục đơn giản trong thư mục gốc của Mac HD, bạn có thể có quyền truy cập vào menu bên trong của Trình mô phỏng iOS. Các phiên bản cũ hơn don có tính năng này AFAIK.

Đóng tất cả các trình giả lập của bạn trước. Sau đó, chỉ cần gõ này trong thiết bị đầu cuối của bạn.

OSXVM $ sudo mkdir / AppleI Internalal
(Mật khẩu của bạn)

Đó là nó! Bây giờ hãy kiểm tra xem menu bên trong có xuất hiện không bằng cách khởi động trình giả lập và tìm kiếm cái này:

Trên thực tế, điều này là phổ quát cho máy Mac thực sự là tốt! Để biết thông tin của menu nội bộ này, hãy xem bài viết Trung bình này. Nhưng chúng tôi tập trung nhiều hơn vào chế độ toàn màn hình, đó thực sự là lý do bạn có thể mang XCode của mình cùng với trình giả lập trong máy tính để bàn ảo mới:

Nếu bạn có bất kỳ vấn đề về quyền nào, đặc biệt là người dùng High Sierra, bạn sẽ cần tạo thư mục này trong Chế độ khôi phục. Chỉ cần nhấp vào Tiện ích và Thiết bị đầu cuối, nhưng bạn sẽ cần phải di chuyển Main Mac HD của mình, nó cũng sẽ hoạt động.

Bây giờ, chúng tôi sẽ tiến hành cài đặt Expo Client trên môi trường giả lập (bất kỳ một trong).

Bước này rất tầm thường vì vậy tôi khuyên bạn nên đọc nó từ tài liệu chính thức của Expo thay thế:

Khi bạn đã cài đặt ứng dụng Expo, hãy mở nó trong Trình mô phỏng.

Sau đó, nhấp vào ‘Plus, và nhập địa chỉ máy chủ của bạn, nhưng trước tiên, chúng tôi sẽ cần định dạng nó theo những gì hội chợ có thể nhận ra:

Định dạng là:

exp: // <Địa chỉ IP máy chủ>: 

Vì vậy, với tôi đó là: exp exp: //192.168.67.1: 19000

Nhấp vào mở và nếu bạn thấy gói được xây dựng ở phía Windows Dev PC, thì CONGRATULATION, bạn sẽ có thể có được môi trường giả lập ứng dụng. Tuy nhiên, theo mặc định, HMR không bật, nhưng là Tải lại trực tiếp. Nếu bạn cần điều đó, hãy vào Phần cứng-> Lắc cử chỉ và thay đổi nó.

Bước cuối cùng là kích hoạt chế độ toàn màn hình để làm cho nó trở nên đắm chìm hơn. Nếu bạn nhấp vào một mục trong Menu Nội bộ dễ dàng và tầm thường, thì chỉ cần nhấp vào nút toàn màn hình màu xanh lá cây.

https://giant.gfycat.com/AnellectPepperyAdamsstaghornedbeetle.mp4

Và đó là điều đó! Bạn thậm chí có thể có Genymotion hoạt động cùng! Đây là một sự thúc đẩy rất lớn cho năng suất!

https://giant.gfycat.com/EnergeticUltimateAntlion.mp4

Đó là sự kết thúc của bản cập nhật. Hy vọng bạn hạnh phúc trong cuộc hành trình! Expo thực sự là một công cụ mạnh mẽ và chúng ta cần trân trọng nó. Có một bữa trưa không có gì gọi là bữa trưa miễn phí. Vui lòng xem xét quyên góp cho dự án Expo. Họ háo hức về tiền để duy trì dự án và trả tiền cho máy chủ (xây dựng) của họ! (Đáng buồn là họ không cung cấp phương pháp nào để làm điều này)

Và làm ơn, Apple, đừng nói với luật sư của bạn liên lạc với tôi và khiến tôi gặp rắc rối về pháp lý.