【问题标题】:What is the quickest way to convert a React app to React Native?将 React 应用程序转换为 React Native 的最快方法是什么?
【发布时间】:2016-05-29 13:28:18
【问题描述】:

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

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

【问题讨论】:

    标签: reactjs react-native


    【解决方案1】:

    您必须参考 React Native 结构才能真正了解如何将您的 React 应用转换为您的 React Native 应用。

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

    【讨论】:

    • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。
    【解决方案2】:

    正如其他人所提到的,没有快速的方法可以将 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)
    

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

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

        【解决方案4】:

        一些可重复使用的东西是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"});
        }
        

        【讨论】:

        • 这正是我正在寻找的答案。我认为它很好地解决了问题的症结——不是机械的“如何”,而是理论上的“如何”。如何设计适合 Web 和移动设备的应用程序组件?
        【解决方案5】:

        WebViews 和 React-native 是两个完全不同的概念。要么你想使用前者(而不是你可以毫不费力地实际使用你的应用程序),要么使用后者。在这种情况下,您可能可以重用一些业务逻辑,但大部分渲染都必须重写。

        React Native 是 learn once, write anywhere,而不是 learn once, write once :)

        【讨论】:

          【解决方案6】:

          它们通常是相当独立的,部分原因是您的渲染目标不同(即没有 divs),部分原因是像 window 这样的东西不可用。可以在 Web 和本机应用程序之间重用代码,但前提是您必须非常小心。

          来自react native release blog post

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

          【讨论】:

            猜你喜欢
            • 2019-09-18
            • 1970-01-01
            • 1970-01-01
            • 2020-06-19
            • 2011-07-12
            • 1970-01-01
            • 2020-01-05
            • 1970-01-01
            • 2017-05-16
            相关资源
            最近更新 更多