初始化应用程序
在 应用程序布局 准备就绪后，现在我们需要挂载 React 组件并初始化应用程序。您可以在适当的 Framework7 应用程序参数 部分中了解所有可能的 Framework7 初始化参数。
假设您使用 Webpack、Rollup 或其他支持 ES-next 模块的包管理器，我们可能会遵循以下结构
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- ... metas and styles ... -->
<link rel="stylesheet" href="path/to/framework7-bundle.min.css">
</head>
<body>
<!-- App Root Element -->
<div id="app"></div>
<!-- Scripts will be auto injected -->
</body>
</html>/* my-app.js */
// Import React
import React from 'react';
// Import ReactDOM
import ReactDOM from 'react-dom';
// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle';
// Import F7-React Plugin
import Framework7React from 'framework7-react';
// Init F7-React Plugin
Framework7.use(Framework7React);
// Import Main App component
import App from './App.jsx';
// Mount React App
ReactDOM.render(
React.createElement(App),
document.getElementById('app')
)您的根 App.jsx 组件通常会有一个顶级 Framework7App 组件。此组件用于配置您的应用程序
// App.jsx
import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-react';
import routes from './routes.js';
const f7params = {
// Array with app routes
routes,
// App Name
name: 'My App',
// ...
};
export default () => (
{/* Main Framework7 App component where we pass Framework7 params */}
<App {...f7params}>
{/* initial page is specified in routes.js */}
<View main url="/" />
</App>
)
在上面的示例中
- 我们在其
params属性中将 Framework7 参数 传递给主 Framework7 应用程序组件App； - 传递给 ReactDOM.render 的根元素（
document.getElementById('app')）将用作 Framework7 根元素
我们还必须指定带有路由的数组（如果应用程序中页面间有导航）。查看 React 组件扩展、路由器和 导航路由 部分中的路由的相关信息。
本页