我是Ionic的新手。我刚刚在本地系统上安装了新发布的Ionic React 4.11(https://ionicframework.com/blog/announcing-ionic-react/)。但是在某些组件上找不到适当的文档。此文档页面不包含任何用法示例。
我需要一些帮助来实现下面给定链接中显示的Nav示例。
https://ionicframework.com/docs/api/nav
任何人都可以指导如何在Ionic React中实现相同的示例。
我在这里找到了示例代码:https://github.com/ionic-team/ionic-docs/blob/master/src/demos/api/nav/index.html
但是它使用的是纯JavaScript,因此我尝试将其转换为React格式。但不确定如何在React中转换相同的示例代码。单击任何项目后,只有待处理部分才能注入相关的NavDetail组件。请参阅所附的屏幕截图,我可以达到多少。
const techs = [
{
'title': 'Angular',
'icon': 'angular',
'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.',
'color': '#E63135'
},
{
'title': 'CSS3',
'icon': 'css3',
'description': 'The latest version of cascading stylesheets - the styling language of the web!',
'color': '#0CA9EA'
},
{
'title': 'HTML5',
'icon': 'html5',
'description': 'The latest version of the web\'s markup language.',
'color': '#F46529'
},
{
'title': 'JavaScript',
'icon': 'javascript',
'description': 'One of the most popular programming languages on the Web!',
'color': '#FFD439'
},
{
'title': 'Sass',
'icon': 'sass',
'description': 'Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension.',
'color': '#CE6296'
},
{
'title': 'NodeJS',
'icon': 'nodejs',
'description': 'An open-source, cross-platform runtime environment for developing server-side Web applications.',
'color': '#78BD43'
},
{
'title': 'Python',
'icon': 'python',
'description': 'A clear and powerful object-oriented programming language!',
'color': '#3575AC'
},
{
'title': 'Markdown',
'icon': 'markdown',
'description': 'A super simple way to add formatting like headers, bold, bulleted lists, and so on to plain text.',
'color': '#412159'
},
{
'title': 'Tux',
'icon': 'tux',
'description': 'The official mascot of the Linux kernel!',
'color': '#000'
},
];
const NavHome = (props: any) => {
const showDetail = (title: any): void => {
alert('you clicked '+ title);
// Need help to push item on click of list
// const tech = techs.find(tech => tech.title === title);
// nav.push('nav-detail', { tech });
};
return (
<React.Fragment>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Test 111</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen class="ion-padding">
<IonList>
{techs.map(tech =>
<IonItem button key={Math.random()} onClick={() => showDetail(tech.title)}>
<IonIcon slot="start" name="logo-${tech.icon}"></IonIcon>
<IonLabel>{tech.title}</IonLabel>
</IonItem>
)};
</IonList>
</IonContent>
</React.Fragment>
)
};
const NavDetail = () => (
<React.Fragment>
<IonHeader translucent>
<IonToolbar>
<IonButton slot="start">Back</IonButton>
<IonTitle>Test</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen class="ion-padding">
<p>Hi</p>
</IonContent>
</React.Fragment>
);
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonNav></IonNav>
<NavHome />
</IonReactRouter>
</IonApp>
);
export default App;
谢谢, 吉涅什·拉瓦尔(Jignesh Raval)
答案 0 :(得分:1)
他们的React Navigation官方文档-https://ionicframework.com/docs/react/navigation
答案 1 :(得分:1)
到目前为止,ion-nav
仍未在React中得到正式支持,因此我已经尝试使用JS使其工作(其中有些是反复试验的,因此可能有些混乱) )。在我的IonReactNav
内,将props.children
包裹并设置为ion-nav
根。我还希望detail
道具是一个呈现我的Detail
组件的函数。然后,我创建一个nav-detail
自定义元素,并附加Detail
节点:
IonReactNav.tsx
import React from 'react';
import { IonNav } from '@ionic/react';
interface IonReactNavProps {
detail: Function
}
const IonReactNav: React.FC<IonReactNavProps> = ({ children, detail }) => {
const handleNavWillChange = async (navEl: HTMLIonNavElement) => {
const rootView = await navEl.getByIndex(0)
if (rootView === undefined) {
const homeEl = navEl.querySelector('#home-wrapper') as HTMLDivElement
const detailEl = navEl.querySelector('#detail-wrapper') as HTMLDivElement
if (!homeEl || !detailEl) {
throw new Error('Missing home or detail wrapper elements')
}
navEl.setRoot(homeEl)
if (customElements.get('nav-detail') === undefined) {
const detailNodes: ChildNode[] = []
detailEl.childNodes.forEach(node => {
detailNodes.push(node)
})
customElements.define('nav-detail', class NavDetail extends HTMLElement {
connectedCallback() {
this.append(...detailNodes)
}
})
}
navEl.querySelectorAll('.ion-react-nav-detail-btn').forEach(btn => {
btn.addEventListener('click', function () {
navEl.push('nav-detail')
})
})
}
}
return (
<IonNav onIonNavWillChange={(e) => handleNavWillChange(e.target as HTMLIonNavElement)} root="nav-home">
<div id="home-wrapper" >
{children}
</div>
<div id="detail-wrapper" style={{ display: 'none' }}>
{detail()}
</div>
</IonNav>
)
}
export default IonReactNav
我还希望打开详细信息按钮具有ion-react-nav-detail-btn
类,因此我可以在IonReactNav
内附加适当的事件。
<IonReactNav detail={() => <TechDetail {...tech} />}>
...
<IonList>
{techs.map((tech, i) => {
return (
<IonItem button className="ion-react-nav-detail-btn" key={i} onClick={() => setTech(techs[i])}>
<IonIcon slot="start" icon={tech.icon} style={{ color: `${tech.color}` }} />
<IonLabel>
<h3>{tech.title}</h3>
</IonLabel>
</IonItem>
)
})}
</IonList>
...
</IonReactNav>
结帐实时演示或随意克隆here到我使用离子反应空白启动器应用程序的地方。
答案 2 :(得分:0)
您不能在反应中使用IonNav。我做了很多尝试,使其无法工作。我不知道为什么会出现它,但是直到今天它还是不可用。
离子团队的迈克·哈丁顿(Mike Hartington)说,“您在反应中不要使用ion-nav”。
您应该只按照官方doc进行导航。