Ionic React 4.11：如何在导航中推送和弹出 (IonNav)

Question

我是 Ionic 的新手。我刚刚在本地系统上安装了新发布的 Ionic React 4.11 ( https://ionicframework.com/blog/annoucing-ionic-react/ )。但是在某些组件上找不到合适的文档。此文档页面不包含任何使用示例。

我需要一些帮助来实现下面给出的链接中显示的导航示例。

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 中转换相同的示例代码。只有 Pending 部分是在单击任何项​​目时注入相关的 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

Answer 1

他们的 React Navigation 官方文档 - https://ionicframework.com/docs/react/navigation