将React应用程序转换为React Native的最快方法是什么？

Question

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

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

Answer 1

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

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

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

REACT SETUP（在命令行中完成）

>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 集成（在命令行中）

>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 项目的几个步骤

>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)

构建 REACT-CORDOVA APP（在命令行中，在您的 Cordova 项目中）

>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 应用程序很慢的原因，但它很容易解决...

Answer 2

您不能只将您的整个代码用于react本机应用程序.首先,您必须遵循react本机体系结构,然后使用react本机组件开发UI. https://facebook.github.io/react-native/docs/getting-started.html 您将获得大部分帮助.

还有另一个选项,您可以创建一个新的react-native项目并在其中使用webview并在那里显示您的整个网站. https://facebook.github.io/react-native/docs/webview.html

Answer 3

一些可重用的东西是styles:

var style = {
     box: {height: 30, width: 30, padding: 10, ect...}
}

Logic 如州:

constructor(props){
 super(props);

 this.state= {text: "hi"};
}

国家可以像navite和dom一样分享

<View>
<Text>this.state.text</Text>
</View>

dom看起来像这样

<div>this.state.text</div>

你甚至可以分享功能,但你必须像上面所说的那样小心,只要你没有直接调用你的逻辑中的任何dom或refs.

onClick(){
 this.setState({text: "good bye"});
}

Answer 4

react-native对于那些正在寻找一次性编码并导出到Web、Android和IOS的方法的人，我建议使用Expo。它建议仅使用此命令构建网络expo build:web。
这是完整的文档

关于Webview你提到的，我已经为Web制作了项目，然后用Webview它们来制作移动应用程序，但它应该是完全响应式的并且SPA在页面之间导航时充当真正的应用程序。
我自己的例子是：
Web：hoobi.ir Android：Home Design App
另一个例子是vitrinom

Answer 5

它们通常是非常分开的，部分是因为您的渲染目标不同（即no div），部分是由于诸如window无法使用之类的事情。可以在Web应用程序和本机应用程序之间重用代码，但前提是您要非常小心。

从react本机发行博客文章中：

值得注意的是，我们并没有追求“一次编写，就可以在任何地方运行”。不同的平台具有不同的外观，感觉和功能，因此，我们仍应为每个平台开发离散的应用程序

Answer 6

WebViews和React-native是两个完全独立的概念。您要么想要使用前者（比起实际上可以轻松使用应用程序），要么想要使用后者。在那种情况下，您可能会重用一些业务逻辑，但是大多数渲染都必须重写。

React native是learn once, write anywhere，不是learn once, write once:)