Sử dụng python trong phản ứng bản địa

PyCharm giúp bạn tạo, chỉnh sửa, lint, chạy, gỡ lỗi và bảo trì các ứng dụng React Native của bạn. PyCharm cũng cung cấp mã hoàn thành cho các ký hiệu React và Flow

Trước khi bạn bắt đầu

  1. Hãy chắc chắn rằng bạn có nút. js trên máy tính của bạn

  2. Đảm bảo JavaScript và TypeScriptTrình gỡ lỗi JavaScript . Trang Settings/Preferences | Plugins plugin, tab Đã cài đặt , xem Quản lý plugin để biết chi tiết.

Tạo một ứng dụng React Native mới

  1. Nhấp vào Tạo dự án mới trên màn hình Chào mừng hoặc . Mới mẻ. Dự án File | New | Project từ menu chính. Hộp thoại Dự án mới mở ra.

  2. Trong ngăn bên trái, chọn React Native .

  3. Trong ngăn bên phải

    1. Chỉ định đường dẫn đến thư mục nơi các tệp liên quan đến dự án sẽ được lưu trữ

    2. Trong trường Trình thông dịch nút , hãy chỉ định Nút. trình thông dịch js để sử dụng. Chọn một trình thông dịch đã định cấu hình từ danh sách hoặc chọn Thêm để định cấu hình một trình thông dịch mới.

    3. Từ danh sách Reac Native , chọn npx --package Reac-native-cli Reac- . .

      Hoặc, cho npm phiên bản 5. 1 trở về trước, hãy tự cài đặt gói react-native-cli bằng cách chạy npm install -g react-native-cli trong Terminal Alt+F12. Khi tạo một ứng dụng, hãy chọn thư mục lưu trữ gói react-native-cli.

  4. Khi bạn nhấp vào Tạo , PyCharm sẽ tạo React Native-specific project with all the required configuration files, downloads the dependencies, and creates a run/debug configuration of the type React Native with default settings..

Bắt đầu với một ứng dụng React Native hiện có

Để tiếp tục phát triển ứng dụng React Native hiện có, hãy mở ứng dụng đó trong PyCharm và tải xuống các phụ thuộc cần thiết

Mở các nguồn ứng dụng đã có trên máy của bạn

  • Nhấp vào Mở trên màn hình Chào mừng hoặc chọn < . Mở File | Open từ menu chính. Trong hộp thoại mở ra, hãy chọn thư mục lưu trữ nguồn của bạn.

Kiểm tra các nguồn ứng dụng từ kiểm soát phiên bản của bạn

  1. Nhấp vào Nhận từ VCS trên màn hình Chào mừng .

    Hoặc chọn Tệp. Mới mẻ. Dự án từ Kiểm soát phiên bản hoặc Git. Sao chép… từ menu chính.

    Thay vì Git trong menu chính, bạn có thể thấy bất kỳ Hệ thống kiểm soát phiên bản nào khác được liên kết với dự án của bạn. Ví dụ: Mercurial hoặc Perforce .

  2. Trong hộp thoại mở ra, hãy chọn hệ thống kiểm soát phiên bản của bạn từ danh sách và chỉ định kho lưu trữ để kiểm tra các nguồn ứng dụng từ. Xem Kiểm tra một dự án (bản sao) để biết chi tiết

Tải xuống các phụ thuộc

  1. Nhấp vào Chạy 'cài đặt npm' hoặc Chạy 'cài đặt sợi' in the popup:

    Sử dụng python trong phản ứng bản địa

    Bạn có thể sử dụng npm, Sợi 1 hoặc Sợi 2, xem npm và Sợi để biết chi tiết

  2. Chọn Chạy 'cài đặt npm' hoặc Chạy 'cài đặt sợi' from the context menu of package.json trong trình chỉnh sửa hoặc trong cửa sổ công cụ Dự án .

Cài đặt các công cụ khác để bắt đầu với React Native, ví dụ: trình giả lập iOS. Danh sách các công cụ này tùy thuộc vào hệ điều hành của bạn và nền tảng di động mà bạn sẽ nhắm mục tiêu ứng dụng của mình tại. Xem hướng dẫn Bắt đầu React Native để biết hướng dẫn cài đặt chi tiết

an ninh dự án

Khi bạn mở một dự án được tạo bên ngoài PyCharm và được nhập vào đó, PyCharm sẽ hiển thị một hộp thoại trong đó bạn có thể quyết định cách xử lý dự án này bằng mã nguồn lạ

Sử dụng python trong phản ứng bản địa

Chọn một trong các tùy chọn sau

  • Xem trước ở Chế độ an toàn . trong trường hợp này là PyCharm, mở dự án ở chế độ xem trước. Điều đó có nghĩa là bạn có thể duyệt các nguồn của dự án nhưng bạn không thể chạy các tác vụ và tập lệnh hoặc chạy/gỡ lỗi dự án của mình.

    PyCharm hiển thị thông báo ở đầu khu vực trình chỉnh sửa và bạn có thể nhấp vào liên kết Tin tưởng dự án… và tải dự án của mình bất cứ lúc nào.

  • Dự án tin cậy . trong trường hợp này, PyCharm mở và tải một dự án. Điều đó có nghĩa là dự án được khởi tạo, các plugin của dự án được giải quyết, các phần phụ thuộc được thêm vào và tất cả các tính năng của PyCharm đều khả dụng.

  • Không mở . trong trường hợp này PyCharm không mở dự án.

Tìm hiểu thêm từ Bảo mật dự án

Dự án được tạo từ màn hình Chào mừng hoặc qua Tệp. Mới mẻ. Dự án như được mô tả trong sẽ tự động được coi là đáng tin cậy.

hỗ trợ mã hóa

PyCharm cung cấp tính năng hoàn thành mã cho API React và JSX trong mã JavaScript. Hoàn thành mã hoạt động cho các phương thức React, thuộc tính dành riêng cho React, thẻ HTML và tên thành phần, sự kiện React, thuộc tính thành phần, v.v. Xem phản ứng. Hoàn thành Mã để biết thêm thông tin

Chạy và gỡ lỗi ứng dụng React Native

Bạn có thể chạy và gỡ lỗi ứng dụng của mình trên thiết bị vật lý hoặc trên trình giả lập. Trước khi bạn khởi chạy ứng dụng của mình, hãy đảm bảo rằng trình giả lập đang chạy hoặc nếu bạn đang sử dụng thiết bị vật lý thì nó đã được kết nối với máy tính của bạn

PyCharm làm cho việc chạy và gỡ lỗi các ứng dụng React Native trở nên rất linh hoạt. Ví dụ: nếu bạn khởi động ứng dụng của mình lần đầu tiên, bạn có thể chọn chạy gói React Native, xây dựng ứng dụng và mở nó trên trình giả lập - tất cả những điều đó như một phần của phiên chạy hoặc gỡ lỗi. Bạn cũng có thể bỏ qua việc khởi chạy gói nếu nó đang chạy hoặc từ chối xây dựng ứng dụng nếu bạn chưa thực hiện bất kỳ thay đổi nào đối với mã gốc của nó kể từ lần chạy trước

Tạo cấu hình chạy/gỡ lỗi React Native

  1. Chọn Chạy. Chỉnh sửa cấu hình từ trình đơn, nhấp vào nút Thêm cấu hình mới (

    Sử dụng python trong phản ứng bản địa
    ) . React Native from the list to open the configuration settings.

  2. Chọn xem bạn có muốn PyCharm xây dựng và khởi chạy ứng dụng cho bạn hay không

    • Chọn hộp kiểm Xây dựng và khởi chạy nếu bạn khởi chạy ứng dụng của mình lần đầu tiên hoặc nếu bạn đã cập nhật mã gốc của ứng dụng kể từ lần cuối .

    • Xóa hộp kiểm này nếu bạn chưa thực hiện bất kỳ thay đổi nào đối với mã gốc của ứng dụng kể từ lần xây dựng cuối cùng. Khi bạn bắt đầu gỡ lỗi, PyCharm đợi bạn mở ứng dụng của mình trong trình giả lập với tính năng gỡ lỗi từ xa được bật như được mô tả trên trang web chính thức của React Native

    • Nếu ứng dụng của bạn sử dụng Expo, hãy xóa hộp kiểm này vì gói này sẽ tự xử lý quy trình

  3. Nếu bạn đã chọn hộp kiểm Xây dựng và khởi chạy , hãy chọn nền tảng đích, Android hoặc iOS.

    Tùy thuộc vào lựa chọn của bạn, PyCharm sẽ chạy gói với react-native run-ios hoặc với react-native run-android

    • Để mô phỏng nền tảng Android , hãy sử dụng thiết bị ảo Android.

    • Để mô phỏng nền tảng iOS , bạn cần cài đặt công cụ dòng lệnh ios-sim . Bạn có thể thực hiện thông qua globally. You can do it through the Trình quản lý gói nút (npm) , xem npm, pnpm và Yarn hoặc bằng cách chạy lệnh sudo npm install ios-sim -g, tùy thuộc vào hệ điều hành của bạn .

    Tìm hiểu thêm từ trang web chính thức của React Native

    Tùy chọn, trong trường Đối số , nhập đối số sẽ được chuyển đến Reac Native . ‑‑simulator="iPhone 4s". . ‑‑simulator="iPhone 4s". . ‑‑simulator="iPhone 4s". . ‑‑simulator="iPhone 4s". . ‑‑simulator="iPhone 4s". . ‑‑simulator="iPhone 4s". , for example, specify the simulator type through the ‑‑simulator flag: ‑‑simulator="iPhone 4s".

  4. Chỉ định trình duyệt để sử dụng

    Khi gỡ lỗi các ứng dụng React Native, PyCharm dựa trên thời gian chạy Chrome, được chính React Native sử dụng. Bạn cũng có thể sử dụng DevTools cùng với PyCharm. Khi bạn bắt đầu phiên gỡ lỗi, PyCharm sẽ bắt đầu một phiên bản Chrome mới và đính kèm vào đó

  5. Trong trường Máy chủ lưu trữ gói , chỉ định máy chủ nơi chạy gói React Native, giá trị mặc định là localhost.

    Nếu bạn đang sử dụng Expo, bạn có thể cần thay đổi máy chủ lưu trữ gói mặc định để đảm bảo kết nối thành công với trình gỡ lỗi. Kết nối này có thể không thành công vì PyCharm theo mặc định sử dụng localhost để bắt đầu gỡ lỗi trong khi Expo mong đợi 127. 0. 0. 1 hoặc địa chỉ IP bên ngoài tùy thuộc vào địa chỉ được chọn trong trường Kết nối của cấu hình gói Metro.

  6. Trong trường Cổng gói , chỉ định cổng mà gói React Native chạy trên đó, theo mặc định 8081 is chosen, learn more from the React Native official website.

    Nếu ứng dụng của bạn sử dụng Expo, bạn có thể cần thay đổi cổng thành 19000 hoặc 19001< . , depending on the Expo configuration.

  7. Chỉ định nút. trình thông dịch js để sử dụng

    Nếu bạn chọn bí danh Dự án , PyCharm sẽ tự động sử dụng trình thông dịch mặc định của dự án từ Nút . trang js. Trong hầu hết các trường hợp, PyCharm phát hiện trình thông dịch mặc định của dự án và tự điền vào trường. field on the Node.js page . In most cases, PyCharm detects the project default interpreter and fills in the field itself.

    Bạn cũng có thể chọn một trình thông dịch từ xa hoặc cục bộ đã định cấu hình khác hoặc nhấp vào

    Sử dụng python trong phản ứng bản địa
    và định cấu hình một trình thông dịch mới.

  8. Chỉ định đường dẫn đến react-native-cli và thư mục làm việc của ứng dụng. Tùy chọn, nhập các biến môi trường cho react-native run-android hoặc react-native run-ios.

  9. Theo mặc định, PyCharm tự động khởi động gói React Native khi bạn gọi cấu hình chạy/gỡ lỗi. Ví dụ: nếu bạn đã khởi động gói từ bên ngoài PyCharm từ dòng lệnh, bạn có thể sử dụng lại nó mà không cần dừng và khởi động lại. Chọn gói của bạn trong khu vực Trước khi ra mắt và nhấp vào

    Sử dụng python trong phản ứng bản địa
    .

    Sử dụng python trong phản ứng bản địa

Để biết thông tin về các cài đặt chung cho tất cả các cấu hình chạy/gỡ lỗi, hãy xem Cấu hình chạy/gỡ lỗi

Chuẩn bị một thiết bị hoặc một trình mô phỏng

Nếu bạn đang sử dụng thiết bị Android, bạn cần chuẩn bị nó mỗi khi bắt đầu làm việc với một ứng dụng

Trình giả lập iOS chỉ phải được cài đặt một lần, sau đó PyCharm sẽ tự động khởi động nó với react-native run-ios

  • Để chuẩn bị thiết bị Android, hãy khởi chạy thiết bị ảo Android hoặc bật gỡ lỗi qua USB và kết nối với thiết bị Android thực qua USB

    Tìm hiểu thêm từ trang web chính thức của React Native

  • Để chuẩn bị trình mô phỏng iOS, hãy mở Terminal được nhúng (Alt+F12) và nhập.

    npm install -g react-native-cli1

Chạy một ứng dụng

  • Chọn cấu hình React Native mới được tạo từ Chọn cấu hình chạy/gỡ lỗi list on the toolbar and click the Run button (

    Sử dụng python trong phản ứng bản địa
    ) next to the list. PyCharm opens the Run và trước tiên khởi động gói React Native trong React Native tab.

    Sau đó, lệnh react-native run-ios hoặc react-native run-android được thực thi, tùy thuộc vào nền tảng mục tiêu đã chọn. Nếu quá trình xây dựng thành công, trình mô phỏng sẽ hiển thị ứng dụng của bạn

    Tôi có thể sử dụng Python trong React Native không?

    Buddy CI/CD cho phép bạn tích hợp ngay lập tức Python với Build Android React Native Application để tự động hóa quá trình phát triển của bạn và tạo ứng dụng tốt hơn nhanh hơn.

    Chúng tôi có thể sử dụng Python làm phụ trợ trong React Native không?

    React Native – khung phát triển ứng dụng dành cho thiết bị di động – có thể được sử dụng cùng với Django – khung dựa trên Python cấp cao để phát triển phụ trợ. Just like React, it is open-source and free to use for anyone.

    Tôi có nên sử dụng Python với React không?

    Tóm lại, hãy thuê các nhà phát triển React JS nếu bạn cần một trang web hoặc ứng dụng tốt trong khi nếu bạn đang tìm kiếm một ngôn ngữ có mục đích chung .