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

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

---

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

它们通常非常分开，部分原因是渲染目标不同（即没有

div

s），部分原因是

window

之类的东西不可用。可以在web和本机应用程序之间重用代码，但前提是您必须非常小心

从：

值得注意的是，我们不是在追求“一次编写，随时随地运行”。不同的平台有不同的外观、感觉和功能，因此，我们仍然应该为每个平台开发不同的应用程序

---

一些可重用的东西是

样式

：

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

逻辑

如状态：

constructor(props){
 super(props);

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

该状态可以在navite和dom之间共享，如下所示

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

---

WebView和React native是两个完全不同的概念。您可以选择前者（这样您就可以轻松地使用应用程序），也可以选择后者。在这种情况下，您可能会重新使用一些业务逻辑，但是大多数呈现都必须重写

---

React native是

学习一次，在任何地方编写

，而不是

学习一次，编写一次

：）

您不能在React native应用程序中使用整个代码。首先，您必须遵循react本机架构，然后使用react本机组件开发UI。 你会得到这里的大部分帮助

还有另一个选项，您可以创建一个新的react原生项目，在其中使用webview并在其中显示您的整个网站。

---

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

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

如果任何人对Cordova解决方案感兴趣，以下是步骤：

反应设置（在命令行中完成）

部署到静态：

>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": {

CORDOVA集成（在命令行中）

添加几个步骤以包括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:

构建REACT-CORDOVA应用程序（在命令行中，在CORDOVA项目内部）

测试或部署到存储等

>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应用程序很慢，但这是一个很容易解决的问题…

您必须参考react本机结构，才能真正理解如何将react应用程序转换为react本机应用程序

---

从零开始，我建议：

我发现成功的方法是使用react native web制作可在移动和web应用程序之间共享的跨平台组件。然后移植本地体验所需的组件

对于这个例子，我仍在开发本地链接移动应用程序，但它可以编译为web和本机

---

您几乎可以用视图替换div，用rn元素替换其他web元素。然后分别编译到本机和web。您可以使用另一个包中的钩子共享您的业务逻辑。尽可能避开窗口之类的内容。

虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接以供参考。这正是我想要的答案。我认为它很好地解决了问题的关键——不是机械上的“如何”，而是理论上的“如何”。如何设计既适用于web又适用于移动的应用程序组件？

>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

>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

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

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