1

使用这个链接，我已经成功地在我现有的 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;
4

1 回答 1

1

我已经想出了办法。

你需要一种叫做离子电容器的东西来做到这一点。更多信息。可以在这里找到。

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

注意：如果您只想测试您的 React 应用程序并查看如何使用 Ionic 创建实际的Android/iOS/Electron应用程序，则上述部分不是强制性的。

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

于 2020-02-23T06:59:59.750 回答