将 Ionic React 添加到现有的 React 项目答案

【问题标题】：Adding Ionic React to an existing React project将 Ionic React 添加到现有的 React 项目
【发布时间】：2020-02-23 14:59:59
【问题描述】：

使用this链接，我已经成功地在我现有的react项目中添加了最基本的代码。我现在很困惑的是下一步该怎么做？如何从现有的 React 项目中创建应用程序？我想，我需要让这个项目成为一个 Ionic 项目。但是我该怎么做呢？

这是我到目前为止根据教程所做的。 React 应用在我的网络浏览器上运行良好。

import MomentUtils from '@date-io/moment';
import '@fake-db';
import FuseAuthorization from '@fuse/core/FuseAuthorization';
import FuseLayout from '@fuse/core/FuseLayout';
import FuseTheme from '@fuse/core/FuseTheme';
import history from '@history';
import { createGenerateClassName, jssPreset, StylesProvider } from '@material-ui/core/styles';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import { create } from 'jss';
import jssExtend from 'jss-plugin-extend';
import rtl from 'jss-rtl';
import React from 'react';
import Provider from 'react-redux/es/components/Provider';
import { Router } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import AppContext from './AppContext';
import { Auth } from './auth';
import routes from './fuse-configs/routesConfig';
import store from './store';

const jss = create({
    ...jssPreset(),
    plugins: [...jssPreset().plugins, jssExtend(), rtl()],
    insertionPoint: document.getElementById('jss-insertion-point')
});

const generateClassName = createGenerateClassName();

const App = () => {
    return (
        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet>
                    <AppContext.Provider
                        value={{
                            routes
                        }}
                    >
                        <StylesProvider jss={jss} generateClassName={generateClassName}>
                            <Provider store={store}>
                                <MuiPickersUtilsProvider utils={MomentUtils}>
                                    <Auth>
                                        <Router history={history}>
                                            <FuseAuthorization>
                                                <FuseTheme>
                                                    <FuseLayout/>
                                                </FuseTheme>
                                            </FuseAuthorization>
                                        </Router>
                                    </Auth>
                                </MuiPickersUtilsProvider>
                            </Provider>
                        </StylesProvider>
                    </AppContext.Provider>
                </IonRouterOutlet>
            </IonReactRouter>
        </IonApp>
    );
};

export default App;

【问题讨论】：

标签： ionic-framework ionic-react

【解决方案1】：

我已经想出了办法。

您需要一种称为离子电容器的东西来执行此操作。更多信息。可以找到here。

Ionic 提供了一篇官方文章，可以在here 找到。但是，它没有解释生成跨平台应用程序需要完成的部分。

注意：上面提到的部分不是强制性的如果你想只需测试您的 React 应用，看看实际的 Android/iOS/Electron 应用是如何使用离子。

如果您只想构建跨平台应用程序而不更改现有 React 项目中的任何代码，请按照this 页面上提供的步骤操作。向下滚动到构建 android 应用部分。

【讨论】：