Question

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

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

Answer 1

一些可重复使用的东西是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 2

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

还有另一种选择，你可以创建一个新的本地反应项目并在其中使用webview并在那里显示你的整个网站。 https://facebook.github.io/react-native/docs/webview.html

Answer 3

它们通常非常独立，部分原因是您的渲染目标不同（即没有div s），部分原因是因为window不可用。可以在网络和本机应用之间重复使用代码，但前提是您必须非常小心。

来自react native release blog post：

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

Answer 4

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

React native是learn once, write anywhere，而不是learn once, write once：）

Answer 5

正如其他人提到的那样，没有快速的方法可以将反应转换为反应本机。

如果您希望React应用程序在移动设备上运行而无需重写代码库，则可能的替代方法是使用Cordova。出于娱乐目的，我仅用了几分钟就将React-Web应用程序移植到了使用Cordova的移动应用程序中。这种方法有一些缺点，但是好处是您可以在很短的时间内拥有一个运行中的移动应用程序。

以下是如果有人对Cordova解决方法感兴趣的步骤：

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

>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

添加了包含您的反应项目的耦合步骤

>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

测试或部署以存储ETC。

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

实际上，与AngulaJS或Veu相比，此“转换”将促进React的发展。对于Facebook来说，添加此功能是很有意义的，因为React和React Native都是他们的产品。

Answer 7

您必须参考react native结构才能真正了解如何将react应用程序转换为react native应用程序。

从头开始，我建议：https://reactnative.dev/docs/getting-started

Answer 8

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

https://github.com/jottenlips/react-bones 我仍在为这个示例处理本地链接移动应用程序，但它确实可以编译为 Web 和本机。

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

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

8 个答案: