将 React 应用程序转换为 React Native 的最快方法是什么? [英] What is the quickest way to convert a React app to React Native?

问题描述

这可能是一个幼稚的问题，但我找不到关于此主题的太多信息.我有一个功能齐全的 react-redux 应用程序，现在我想将它移植到 iOS 和 Android.我不需要使用任何本地功能，如 GPS 或相机等.理论上，我只想制作一种运行现有 React 应用程序的 webview，然后对其进行调整，直到它看起来更像样.我的第一次尝试是简单地使用我当前的 jsbundle 文件并将其作为 jsCodeLocation 粘贴到 AppDelegate 中.这可能会导致各种错误，例如未定义窗口".

This may be a naive question, but I couldn't find too much information on this topic. I have a fully functional react-redux application and I would now like to port it to iOS and Android. I have no need to use any native features like GPS or Camera etc. In theory I just want to make a sort of webview that runs the existing React app, and then tweak it until it looks more presentable. My first attempt was to simply use my current jsbundle file and stick it into the AppDelegate as the jsCodeLocation. That expectably caused all sorts of errors such as "window" not being defined.

我想我的问题是:人们通常如何管理他们的原生和非原生代码库?它们是完全分开的，还是有办法回收大部分代码?

I guess my question is: how do people usually manage their native and non-native codebases? Are they completely separate, or is there a way to recycle most of the code?

推荐答案

正如其他人提到的，没有快速的方法将 react 转换为 react-native.

As others have mentioned there's no quick way to convert react to react-native.

如果您希望 React 应用程序在移动设备上运行而无需重写代码库，那么一个可能的替代方案是使用 Cordova.为了好玩，我在几分钟内使用 Cordova 将一个 react-web 应用程序移植到了一个移动应用程序中.这种方法有一些缺点，但好处是您可以在很短的时间内拥有一个可以运行的移动应用程序.

A possible alternative if you want your react app to run on a mobile device without rewriting your codebase is to use Cordova. For fun I ported a react-web app into a mobile app using Cordova in just a few minutes. There are some drawbacks to this method, but the benefit is that you can have a working mobile app in very little time.

如果有人对 Cordova 替代方案感兴趣，请执行以下步骤:

Below are the steps if anyone is interested in a Cordova workaround alternative:

REACT SETUP(在命令行中完成)

REACT SETUP (done in command line)

>1. npx create-react-app my-app
>2. cd my-app
>3. npm start

部署到静态:

>1. Update your package.json file from your my-app directory to add "homepage":"." (see below)

  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage":".",
  "dependencies": {

>2. Build (in command line) npm run build

CORDOVA 集成(在命令行中)

CORDOVA INTEGRATION (in command line)

>1.  cd ../ (change to wherever you want the project created, don't do this inside your existing react app folder)
>2.  npm install -g cordova (only if you already don't have Cordova installed)
>3.  cordova create MyApp 
>4.  cd MyApp
>5.  cordova platform add ios //or android or browser

添加几个步骤以包含您的 React 项目

ADD A COUPLE STEPS FOR INCLUDING YOUR REACT PROJECT

>1. Open your Cordova MyApp www folder, delete all files and folders in it except for the 'js' folder
>2. Back in your react build folder update the index file to add two cordova scripts:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

>3. copy all your files from the react build folder into the Cordova www folder (replacing everything except the js folder)

BUILD REACT-CORDOVA APP(在命令行中，在你的 Cordova 项目中)

BUILD REACT-CORDOVA APP (in command line, inside your Cordova project)

>1. cordova build ios //or android or browser

测试或部署到存储等.

>1. Use xcode to open open your react-cordova .xcodeproject, this can be found in the MyApp/Platforms/ios/
>2. Select your simulator and run.  Enjoy your new mobile app!

调整你需要做一些小的调整(比如删除点击延迟......等)- 我认为这就是为什么人们认为 Cordova 应用程序很慢的原因，但它很容易解决...

TWEAK There are some minor tweaks you'll need to do (like remove the tap delay...etc) -I think this is why people think Cordova apps are slow, but it's an easy fix...

这篇关于将 React 应用程序转换为 React Native 的最快方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！