介绍离子反应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
将允许创建一个React项目与Ionic和任何其他依赖。betway东盟体育app运行以下命令创建一个新项目:
betway东盟体育app离子启动myApp空白-类型
＝
反应
cd
myApp
从这里，我们跑
betway东盟体育app离子服务
让我们的项目在浏览器中运行。
看一下React组件
我们的应用程序的基础将在
src
目录，主要入口点是我们的
index.tsx
．如果我们在代码编辑器中打开项目并打开
src / index.tsx
，我们应该看到以下内容:
进口
反应
从
“反应”
；
进口
ReactDOM
从
“react-dom”
；
进口
应用程序
从
”。/应用程序
；
ReactDOM
．
渲染
（
<
应用程序
/>
，
文档
．
getElementById
（
“根”
）
）
；那么这是怎么回事呢?前三行引入了一些依赖关系。首先是React本身。这允许我们用一种叫做JSX的类似html的语法编写组件。稍后我们将讨论JSX。
第二个导入是针对ReactDOM的。的
ReactDOM.render
method是一种浏览器/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。
下一个导入是from
react-router-dom
．我们正在导入Route，这是我们如何将应用程序的URL与我们想要渲染的组件相匹配的
继ReactRouter之后，我们接下来将介绍爱奥尼亚的第一批进口产品。betway东盟体育app要在React中使用组件，必须首先导入它。所以对于爱奥尼betway东盟体育app亚，这意味着任何时候我们想要使用按钮或卡片，它必须添加到我们的导入。在我们的App组件中，我们只使用
IonApp
，
IonRouterOutlet
,
IonReactRouter
．
IonReactRouter
是一个封装ReactRouter的BrowserRouter组件的组件。它的行为或多或少与BrowserRouter相同，只是有一些不同。我们有一个更深入的指南，关于这些差异
最后一个重要的导入是
首页
组件导入。这是一个我们能在应用中导航到的组件，我们稍后会讲到导航部分。
CSS导入从Ionic导入了一些实用样式，比如填充、排版等。betway东盟体育app
在检查完所有的导入之后，我们现在开始第一次看React Component:
常量
应用程序
：
反应
．
足球俱乐部
＝
（
）
= >
（
<
IonApp
>
<
IonReactRouter
>
<
IonRouterOutlet
>
<
路由路径
＝
“/ home”
组件
＝
｛
首页
｝
确切的
＝
｛
真正的
｝
/
>
<
路由的路径
＝
“/”
渲染
＝
｛
（
）
= >
<
重定向到
＝
“/ home”
/
>
｝
/
>
<
/
IonRouterOutlet
>
<
/
IonReactRouter
>
<
/
IonApp
>
）
；
这个React组件为我们的应用程序设置了初始路由，还包括一些用于动画和布局的核心离子组件(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东盟体育appm.jesscamp.com/docs/”
>
文档
<
/
一个
>
｛
' '
｝
会成为你的向导
．
<
/
p
>
<
/
IonContent
>
<
/
IonPage
>
）
；
｝
；
就像
应用程序
我们有一些对特定离子组件的导入，一个对React组件的导入，然后是React组件本身。betway东盟体育app
IonPage
是所有页面的基础组件(一个带有路由/URL的组件)，包括全屏组件的一些常见构建块，如标题、标题和内容组件。
在创建自己的页面时，不要忘记
IonPage成为它们的根组件。有IonPage根组件很重要，因为它帮助确保过渡正常工作，并提供了离子组件所依赖的基本CSS。betway东盟体育app
IonHeader
是不言自明的。它是一个应该存在于页面顶部的组件。
IonHeader
除了处理一些基于flexbox的布局外，它本身没有做太多事情。它是用来装其他部件的，比如
IonToolbar
或
IonSearchbar
．
IonContent
如其名称所示，是我们页面的主要内容区域。它负责提供用户将与之交互的可滚动内容，以及应用中可能使用的任何滚动事件。
我们目前的内容相对简单，但不包含任何可以在真正的应用中使用的内容，所以让我们改变这一点。
注意:为简洁起见，我们排除了组件的重复部分，如其他组件的函数声明或导入语句。
<
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 Component概念的混合。React概念的第一个清晰例子是React组件的自关闭标签
IonCheckbox
．这只是编写不包含任何子内容的组件的一种更简单的方法。
在Web组件方面，我们有一个特殊的属性称为
槽
．这是让
IonItem
知道在哪里放置
IonCheckbox
当它呈现。这不是一个React API，而是一个web标准API。
让我们看看另一个来自爱奥尼亚的组件，FAB。betway东盟体育app浮动动作按钮是一种很好的方式来提供一个从应用的其他部分上升的主要动作。对于这个FAB，我们需要三个组件:FAB, FAB Button和图标。
进口
｛
添加
｝
从
“betway东盟体育appionicons
/
图标的
；
.．.
<
IonContent
>
<
IonList
>
.．.
<
/
IonList
>
<
IonFab垂直
＝
“底”
水平
＝
“结束”
槽
＝
“固定”
>
<
IonFabButton
>
<
betway东盟体育appIonIcon图标
＝
｛
添加
｝
/
>
<
/
IonFabButton
>
<
/
IonFab
>
<
/
IonContent
>
在我们的主要
IonFab
，我们用垂直和水平属性设置它的位置。我们还通过slot属性将渲染位置设置为“fixed”。这将告诉
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
)．这
道具
对象使我们能够访问React Router的历史API，允许我们将一个新的路由推入导航堆栈。在我们的
IonFabButton
，我们可以添加一个点击处理程序，并调用
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＝"//m.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
>
）
；在这里，当我们重新加载时，如果没有应用程序历史记录，我们将能够导航回我们的主路线。
添加图标
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
>
｝
；创建原生应用
我们现在有了一个离子型反应应用程序的基础，包括一些UI组件betway东盟体育app和导航。爱奥尼亚组件的伟大之处在于，它们可以在任何地betway东盟体育app方工作，包括iOS、Android和PWAs。为了部署到手机、桌面等平台，我们使用了Ionic的跨平台应用运行时betway东盟体育app<一个href＝"https://capacitor.m.jesscamp.com" c-id="168.2617.5.1"> 电容器．它提供了一致的、以web为中心的api集，使应用程序尽可能接近web标准，同时在支持这些标准的平台上访问丰富的本地设备功能。
添加本机功能很容易。首先，将电容器添加到您的项目:
betway东盟体育app离子的集成
启用
电容器接下来，构建项目，然后添加您选择的平台:
betway东盟体育app离子建造离子帽
添加
ios离betway东盟体育app子帽
添加
安卓我们使用标准的本地ide (Xcode和Android Studio)来打开、构建和运行iOS和Android项目:
betway东盟体育app离子帽
开放
ios离betway东盟体育app子帽
开放
安卓可以找到更多的细节<一个href＝"https://capacitor.m.jesscamp.com/docs/getting-started/with-ionic" c-id="168.2668.5.1"> 在这里．
接下来,看看<一个href＝"https://capacitor.m.jesscamp.com/docs/apis" c-id="168.2674.5.1"> 所有的api这是可用的。有一些很棒的东西，包括<一个href＝"https://capacitor.m.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和电容构建完整的离子型应用程序，请关注我们的betway东盟体育app
想要更详细地了解爱奥尼亚的组件，请查看betway东盟体育app<一个href＝"//m.jesscamp.com/docs/components" c-id="168.3060.5.1"> 组件API页面．有关React的更多详细信息，请参阅<一个href＝"https://reactjs.org/" c-id="168.3063.5.3"> 反应文档．要继续构建本机功能，请参阅<一个href＝"//m.jesscamp.com/capacitor/docs/" c-id="168.3066.5.5"> 电容器文档．
应用程序构建快乐!
