搜索文档 /

离子反应快速betway东盟体育app入门

什么是离子骨架?betway东盟体育app

首先,如果你是新来的,欢迎你!betway东盟体育appIonic是一个免费的开源组件库,可用于构建在iOS、Android、Electron和Web上运行的应用程序。你只需使用熟悉的技术(HTML、CSS、JavaScript)编写应用程序,然后部署到任何平台上。必威betway官方

除了UI组件,Ionic还提供了一个命令行工具,用于创建新的betway东盟体育app应用程序,以及部署到我们支持的各种平台上。

在这篇指南中,我们将讨论React和Ionic的基础,包括Ionic的特殊功能。betway东盟体育app如果你对React很熟悉,那就好好享受这个指南,并对Ionic有新的了解。betway东盟体育app如果你对这两种都不熟悉,不用担心!本指南将涵盖基础知识,并提供足够的信息,使应用程序启动和运行。

使用Ionic CLI创建项目betway东盟体育app

首先,让我们安装最新版本的Ionic CLI。betway东盟体育app


              npm
             
              安装
             - g betway东盟体育app@ionic / cli

这里是全局命令 betway东盟体育app 将允许使用Ionic和其他依赖项创建React项目。betway东盟体育app使用实例创建新项目:


             betway东盟体育app离子型启动myApp空白——类型
              
             反应
              cd
             myApp

从这里,我们逃跑 betway东盟体育app离子服务 让我们的项目在浏览器中运行。

看一下React组件

我们应用的基础将在 src 目录,而主要的入口点将是我们的 index.tsx .如果我们在代码编辑器中打开项目并打开 src / index.tsx ,我们应该看到以下几点:


              进口
             反应
              
             
              “反应”
              
             
              进口
             ReactDOM
              
             
              “react-dom”
              
             
              进口
             应用程序
              
             
              ”。/应用程序
              
             ReactDOM
              
              渲染
              
                <
                应用程序
              
               />
              
             文档
              
              getElementById
              
              “根”
              
              
              

这是怎么回事呢?前三行有一些依赖关系。首先是React本身。这允许我们用类似html的语法(称为JSX)编写组件。稍后我们将稍微讨论JSX。

第二个导入是针对ReactDOM的。的 ReactDOM.render 方法是特定于浏览器/DOM的获取组件并将其呈现到指定DOM节点的方法。

最后一个导入是我们应用的根组件,简单地命名为 应用程序 .这是我们的第一个React组件,将在React应用的启动过程中使用。

如果我们开放 App.tsx ,我们应该看到以下内容。


              进口
             反应
              
             
              “反应”
              
             
              进口
             
              
             路线
              
             
              
             
              “react-router-dom”
              
             
              进口
             
              
             IonApp
              
             IonRouterOutlet
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             
              
             IonReactRouter
              
             
              
             
              “@betway东盟体育appionic / react-router”
              
             
              进口
             首页
              
             
              ”。/页面/ Home '
              
             
              /*核心CSS需要离子组件正常工作*/betway东盟体育app
             
              进口
             
              “@betway东盟体育appionic /反应/ css / core。”
              
             
              常量
             应用程序
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
              <
             IonApp
              >
             
              <
             IonReactRouter
              >
             
              <
             IonRouterOutlet
              >
             
              <
             路由路径
              
              “/ home”
             组件
              
              
             首页
              
             确切的
              
              
              真正的
              
             
              /
              >
             
              <
             路由的路径
              
              “/”
             渲染
              
              
              
              
             
              = >
             
              <
             重定向到
              
              “/ home”
             
              /
              >
              
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              <
              /
             IonReactRouter
              >
             
              <
              /
             IonApp
              >
             
              
              

乍一看,似乎发生了很多事情,所以让我们从第一组进口开始分解。


              进口
             反应
              
             
              “反应”
              
             
              进口
             
              
             路线
              
             
              
             
              “react-router-dom”
              
             
              进口
             
              
             IonApp
              
             IonRouterOutlet
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             
              
             IonReactRouter
              
             
              
             
              “@betway东盟体育appionic / react-router”
              
             
              进口
             首页
              
             
              ”。/页面/ Home '
              

类似于 index.tsx ,我们首先必须导入React来使用JSX。

下一个导入来自 react-router-dom .我们正在导入Route,这是我们将应用的URL与我们想要渲染的组件匹配的方式

继ReactRouter之后,我们又进口了第一批Ionic产品。betway东盟体育app要在React中使用组件,您必须首先导入它。所以对于Ionbetway东盟体育appic,这意味着无论何时我们想使用Button或Card,它都必须添加到导入中。在我们的App组件中,我们只使用 IonApp IonRouterOutlet , IonReactRouter

IonReactRouter 是一个封装了ReactRouter的BrowserRouter组件的组件。它的行为或多或少与BrowserRouter相同,只是有一些不同。我们有一个更深入的指南来讨论我们的这些差异 反应导航文档

最后一个重要的要点是 首页 组件导入。这是一个我们可以在应用程序中导航到的组件。稍后我们将讨论导航部分。

CSS导入从Ionic引入了填充、排版等实用样式。betway东盟体育app

在检查了所有的导入之后,我们现在来看看React组件:


              常量
             应用程序
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
              <
             IonApp
              >
             
              <
             IonReactRouter
              >
             
              <
             IonRouterOutlet
              >
             
              <
             路由路径
              
              “/ home”
             组件
              
              
             首页
              
             确切的
              
              
              真正的
              
             
              /
              >
             
              <
             路由的路径
              
              “/”
             渲染
              
              
              
              
             
              = >
             
              <
             重定向到
              
              “/ home”
             
              /
              >
              
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              <
              /
             IonReactRouter
              >
             
              <
              /
             IonApp
              >
             
              
              

这个React组件为我们的应用设置了初始路由,还包括一些用于动画和布局的核心Ionic组件(IonRouterOutlet和IonApp)。betway东盟体育app突出的一点是,在React中,要进行数据绑定,值是用大括号( {} ).所以在 路线 组件时,可以设置 组件 首页 从早些时候组件。这就是React如何知道这个值不是一个字符串,而是一个对组件的引用。

这里需要注意的是,这些都是标准的React DOM库,这意味着没有自定义集成层或转换步骤。

具有样式的组件

现在, 应用程序 这里没有太多需要修改的地方。它是容器组件的一个基本示例。设置了Router逻辑后,它所负责的就是呈现一个与给定URL路由匹配的组件。因为我们已经安装了一个组件/路由器,让我们继续修改我们的 首页 组件。

目前, 首页 组件看起来像这样:

家反应组件


              进口
             
              
             IonContent
              
             IonHeader
              
             IonPage
              
             IonTitle
              
             IonToolbar
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             反应
              
             
              “反应”
              
             
              常量
             首页
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
             
              <
             IonToolbar
              >
             
              <
             IonTitle
              >
             betway东盟体育app离子空白
              <
              /
             IonTitle
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             IonHeader
              >
             
              <
             IonContent类名
              
              “ion-padding”
              >
             世界
              
             你的生蚝
              
             
              <
             p
              >
             如果你
              得到
             失去了
              
             
              
              ' '
              
             
              <
             一个目标
              
              “平等”
             rel
              
              “noopener”
             href
              
              “https://betway东盟体育appwww.jesscamp.com/docs/”
             
              >
             文档
              <
              /
             一个
              >
              
              ' '
              
             将是你的向导
              
             
              <
              /
             p
              >
             
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              

就像 应用程序 我们有一些import用于特定的Ionic组件,一个import用于React,然后是React组件本身。betway东盟体育app

IonPage 是所有页面的基础组件(一个带有路由/URL的组件),它包括全屏组件的一些常见构件,如标题、标题和内容组件。

在创建自己的页面时,不要忘记拥有 IonPage 成为它们的根组件。有 IonPage 作为根组件非常重要,因为它可以帮助确保转换工作正常,同时还提供了Ionic组件所依赖的基本CSS。betway东盟体育app

IonHeader 是不言自明的。它是一个存在于页面顶部的组件。 IonHeader 除了处理一些基于flexbox的布局之外,它本身并没有做太多的事情。它是用来装其他部件的,比如 IonToolbar IonSearchbar

IonContent 顾名思义,它是我们页面的主要内容区域。它负责提供用户将与之交互的滚动内容,以及任何可以在应用程序中使用的滚动事件。

我们当前的内容是相对简单的,但不包含任何可以在真正的应用程序中使用的东西,所以让我们改变它。

注意:为了简单起见,我们排除了组件中重复的部分,比如其他组件的函数声明或import语句。


              <
             IonPage
              >
             
              ...
             
              <
             IonContent
              >
             
              <
             IonList
              >
             
              <
             IonItem
              >
             
              <
             IonCheckbox槽
              
              “开始”
             
              /
              >
             
              <
             IonLabel
              >
             
              <
             h1
              >
             创建的想法
              <
              /
             h1
              >
             
              <
             IonNote
              >
             白兰地的经营理念
              <
              /
             IonNote
              >
             
              <
              /
             IonLabel
              >
             
              <
             IonBadge颜色
              
              “成功”
             
              
              “结束”
              >
             
              5
             
              <
              /
             IonBadge
              >
             
              <
              /
             IonItem
              >
             
              <
              /
             IonList
              >
             
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >

在我们 IonContent ,我们要加一个 IonList 和一个更多的参与 IonItem 组件。让我们来看看 IonItem ,因为它是这里的中心。


              <
             IonItem
              >
             
              <
             IonCheckbox槽
              
              “开始”
             
              /
              >
             
              <
             IonLabel
              >
             
              <
             h1
              >
             创建的想法
              <
              /
             h1
              >
             
              <
             IonNote
              >
             白兰地的经营理念
              <
              /
             IonNote
              >
             
              <
              /
             IonLabel
              >
             
              <
             IonBadge颜色
              
              “成功”
             
              
              “结束”
              >
             
              5
             
              <
              /
             IonBadge
              >
             
              <
              /
             IonItem
              >

Item很重要,因为它清楚地展示了React概念和Web组件概念的混合。React概念的第一个清晰示例是React组件的自关闭标记 IonCheckbox .这只是编写不包含任何子内容的组件的一种更简单的方法。

在Web组件端,我们有一个特殊的属性叫做 .这是让 IonItem 知道在哪里放置 IonCheckbox 当它呈现。这不是React API,而是一个web标准API。

让我们看看另一个来自Ionic的组件FAB。betway东盟体育app浮动动作按钮是提供一个从应用程序的其余部分升起的主要动作的好方法。对于这个FAB,我们将需要三个组件:FAB, FAB按钮和图标。


              进口
             
              
             添加
              
             
              
             “betway东盟体育appionicons
              /
             图标的
              
             ...
              <
             IonContent
              >
             
              <
             IonList
              >
             
              ...
             
              <
              /
             IonList
              >
             
              <
             IonFab垂直
              
              “底”
             水平
              
              “结束”
             
              
              “固定”
              >
             
              <
             IonFabButton
              >
             
              <
             betway东盟体育appIonIcon图标
              
              
             添加
              
             
              /
              >
             
              <
              /
             IonFabButton
              >
             
              <
              /
             IonFab
              >
             
              <
              /
             IonContent
              >

在我们的主要 IonFab ,我们用垂直和水平属性设置它的定位。我们也将渲染位置设置为“固定”与插槽属性。这将告诉 IonFab 中可滚动内容的外部呈现 IonContent

现在,让我们将一个单击处理程序连接到它。我们想要做的是当我们点击按钮时,我们将导航到一个新页面(我们将在稍后创建)。要做到这一点,我们需要访问React Router的导航API。幸运的是,由于这是在路由器/路由环境中渲染的,我们可以通过传递给我们的Home组件的道具来访问React路由器api。


              进口
             
              
             添加
              
             
              
             
              “betway东盟体育appionicons /图标”
              
             
              ...
             
              常量
             首页
              
             反应
              
              足球俱乐部
              <
             RouteComponentProps
              >
             
              
             
              
              道具
              
             
              = >
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
              ...
              <
              /
             IonHeader
              >
             
              <
             IonContent
              >
             
              <
             IonList
              >
              ...
              <
              /
             IonList
              >
             
              <
             IonFab垂直
              
              “底”
             水平
              
              “结束”
             
              
              “固定”
              >
             
              <
             IonFabButton onClick
              
              
              
              
             
              = >
             道具
              
             历史
              
              
              
              ' /新'
              
              
              >
             
              <
             betway东盟体育appIonIcon图标
              
              
             添加
              
             
              /
              >
             
              <
              /
             IonFabButton
              >
             
              <
              /
             IonFab
              >
             
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
             
              出口
             
              默认的
             首页
              

在我们的组件声明中,我们传入 道具 这是类型 RouteComponentProps (进口 react-router ).这 道具 object使我们能够访问React Router的历史API,允许我们将一个新的路由推送到导航栈中。在我们的 IonFabButton ,我们可以添加一个click处理器,然后调用 props.history.push 然后通过新的路线。在本例中,我们将导航到


              <
             IonFabButton onClick
              
              
              
              
             
              = >
             道具
              
             历史
              
              
              
              ' /新'
              
              
             
              >

新建路由

现在我们已经准备好了在应用中导航的部分,我们需要创建一个新组件,并将新路由添加到我们的路由器声明中。让我们打开 App.tsx 文件并添加新的路由。


              ...
             
              进口
             首页
              
             
              ”。/页面/ Home '
              
             
              进口
             NewItem
              
             
              “/页面/ NewItem。”
              
             
              ...
             
              常量
             应用程序
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
              常量
             isAuthed
              
             
              真正的
              
             
              返回
             
              
             
              <
             IonApp
              >
             
              <
             IonReactRouter
              >
             
              <
             IonRouterOutlet
              >
             
              <
             路由路径
              
              “/ home”
             组件
              
              
             首页
              
             
              /
              >
             
              <
             路由路径
              
              “/新”
             组件
              
              
             NewItem
              
             
              /
              >
             
              <
             重定向的
              
              
              “/”
             
              
              “/ home”
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              <
              /
             IonReactRouter
              >
             
              <
              /
             IonApp
              >
             
              
              
             
              
             
              出口
             
              默认的
             应用程序
              

现在我们的路由器有了路由的入口 /新 ,我们将创建所需的组件, NewItem .这将存在于 src /页面/ NewItem.tsx

让我们填 NewItem.tsx 暂时使用一些占位符内容。


              进口
             
              
             IonBackButton
              
             IonButtons
              
             IonContent
              
             IonHeader
              
             IonPage
              
             IonTitle
              
             IonToolbar
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             反应
              
             
              “反应”
              
             
              常量
             NewItem
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
             
              <
             IonToolbar
              >
             
              <
             IonButtons槽
              
              “开始”
              >
             
              <
             IonBackButton
              /
              >
             
              <
              /
             IonButtons
              >
             
              <
             IonTitle
              >
             新项目
              <
              /
             IonTitle
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             IonHeader
              >
             
              <
             IonContent
              >
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              
             
              出口
             
              默认的
             NewItem
              

每个视图必须包含一个 IonPage 组件。没有它,页面转换将无法正常工作。看到<一个href="//www.jesscamp.com/docs/react/navigation" c-id="168.2138.6.3"> IonPage文档为更多的信息。

这里的内容非常简单,看起来应该类似于 首页 组件。什么是新的是 IonBackButton 组件。这用于导航回前面的路由。很直接?但如果我们重新加载页面呢?

在这种情况下,内存中的历史记录丢失了,所以返回按钮消失了。要解决这个问题,我们可以设置 defaultHref 属性值设置为我们想要导航到的URL(如果没有历史记录)。


              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
             
              <
             IonToolbar
              >
             
              <
             IonButtons槽
              
              “开始”
              >
             
              <
             IonBackButton defaultHref
              
              “/ home”
             
              /
              >
             
              <
              /
             IonButtons
              >
             
              <
             IonTitle
              >
             新项目
              <
              /
             IonTitle
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             IonHeader
              >
             
              <
             IonContent
              /
              >
             
              <
              /
             IonPage
              >
             
              
              

在这里,当我们重新加载时,如果没有应用程序历史记录,我们将能够导航回我们的home route。

添加图标

betway东盟体育app离子反应自带(<一个href="https://ionic.io/ionicons/" title="https://betway东盟体育appionic.io/ionicons/" c-id="168.2280.5.1"> https://betway东盟体育appionic.io/ionicons/)预装。您所需要做的就是将您选择的图标从 betway东盟体育appionicons 包,并将其传递给 betway东盟体育appIonIcon 组件通过 图标 道具:


              进口
             反应
              
             
              “反应”
              
             
              进口
             
              
             IonButton
              
             IonContent
              
             betway东盟体育appIonIcon
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             
              
             相机
              
             
              
             
              “betway东盟体育appionicons /图标”
              
             
              出口
             
              常量
             IconExample
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
                <
                IonContent
               >
                <
                IonButton
               >
                <
                betway东盟体育appIonIcon
              
               图标
                
                
               相机
                
              
               />
              合影留念
                
                IonButton
               >
                
                IonContent
               >
             
              
              

注意,对于React,我们传递的是导入的SVG引用, 图标名称为字符串。

开发者还可以根据模式设置不同的图标:


              进口
             反应
              
             
              “反应”
              
             
              进口
             
              
             IonButton
              
             IonContent
              
             betway东盟体育appIonIcon
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             
              
             logoAndroid
              
             logoApple
              
             
              
             
              “betway东盟体育appionicons /图标”
              
             
              出口
             
              常量
             IconExample
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
                <
                IonContent
               >
                <
                IonButton
               >
                <
                betway东盟体育appIonIcon
              
               ios
                
                
               logoApple
                
              
               医学博士
                
                
               logoAndroid
                
              
               />
                
                IonButton
               >
                
                IonContent
               >
             
              
              

创建原生应用

现在我们已经完成了Ionic React应用的基本功能,包betway东盟体育app括一些UI组件和导航。Ionic组件的优点在于,它可以在任何地方使betway东盟体育app用,包括iOS、Android和PWAs。为了将应用部署到移动、桌面和其他平台,我们使用Ionic的跨平台应用运行时betway东盟体育app<一个href="https://capacitor.www.jesscamp.com" c-id="168.2617.5.1"> 电容器.它提供了一组一致的、以web为中心的api,使应用程序尽可能接近web标准,同时在支持它们的平台上访问丰富的本地设备特性。

添加本地功能很容易。首先,将Capacitor添加到项目中:


             betway东盟体育app离子的集成
              启用
             电容器

接下来,构建项目,然后添加你选择的平台:


             betway东盟体育app离子构筑离子帽
              添加
             ios离betway东盟体育app子帽
              添加
             安卓

我们使用标准的原生ide (Xcode和Android Studio)来打开、构建和运行iOS和Android项目:


             betway东盟体育app离子帽
              开放
             ios离betway东盟体育app子帽
              开放
             安卓

可以找到更多的细节<一个href="https://capacitor.www.jesscamp.com/docs/getting-started/with-ionic" c-id="168.2668.5.1"> 在这里

接下来,看看<一个href="https://capacitor.www.jesscamp.com/docs/apis" c-id="168.2674.5.1"> 所有的api这是可用的。有一些很棒的东西,包括<一个href="https://capacitor.www.jesscamp.com/docs/apis/camera" c-id="168.2677.5.3"> 摄像头API.我们只需要几行代码就可以实现照片捕获功能:


              进口
             
              
             IonContent
              
             IonHeader
              
             IonPage
              
             IonTitle
              
             IonToolbar
              
             IonButton
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             反应
              
             
              
             useState
              
             
              
             
              “反应”
              
             
              进口
             
              
             插件
              
             CameraResultType
              
             
              
             
              “@capacitor /核心”
              
             
              常量
             首页
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              = >
             
              
             
              常量
             
              
             相机
              
             
              
             插件
              
             
              常量
             
              
             照片
              
             setPhoto
              
             
              
             
              useState
              
              
              
             
              常量
             
              takePhoto
             
              
             
              异步
             
              
              
             
              = >
             
              
             
              常量
             图像
              
             
              等待
             相机
              
              getPhoto
              
              
             质量
              
             
              90
              
             allowEditing
              
             
              真正的
              
             resultType
              
             CameraResultType
              
             Uri
              
              
              
             
              setPhoto
              
             图像
              
             webPath
              
              
             
              
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
             
              <
             IonToolbar
              >
             
              <
             IonTitle
              >
             betway东盟体育app离子空白
              <
              /
             IonTitle
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             IonHeader
              >
             
              <
             IonContent类名
              
              “ion-padding”
              >
             
              <
             img src
              
              
             照片
              
             
              /
              >
             
              <
             IonButton onClick
              
              
             takePhoto
              
              >
             拍照
              <
              /
             IonButton
              >
             
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              
             
              出口
             
              默认的
             首页
              

接下来该怎么办

本指南涵盖了创建Ionic React应用的基础知识,添加了一些基本的导航,并引入了电容作betway东盟体育app为构建本地应用的一种方式。要更深入地使用React和电容构建完整的Ionic应用程序,请跟随我们的betway东盟体育app 首先应用指南

要更详细地了解爱奥尼亚的组件,请查看betway东盟体育app<一个href="//www.jesscamp.com/docs/components" c-id="168.3060.5.1"> 组件API页面.关于React的更多细节,请查看<一个href="https://reactjs.org/" c-id="168.3063.5.3"> 反应文档.要继续构建本机特性,请参阅<一个href="//www.jesscamp.com/capacitor/docs/" c-id="168.3066.5.5"> 电容器文档

应用程序构建快乐!

以前的
概述
下一个
创建你的第一款应用
Baidu