@dark-engine/native-navigation 🌖

为 NativeScript 平台提供的暗黑路由器。

特性

📚 栈导航
📂 标签导航
🎆 模态导航
🌳 嵌套屏幕
🔢 参数
💃 动画过渡
📈 钩子
✂️ 无依赖

安装

npm

npm install @dark-engine/native-navigation

yarn

yarn add @dark-engine/native-navigation

API

import {
  type NavigationOptions,
  NavigationContainer,
  StackNavigator,
  TabNavigator,
  TransitionName,
  useNavigation,
  VERSION,
} from '@dark-engine/native-navigation';

用法

为了使用导航，您需要在应用程序根元素外包裹一个 NavigationContainer，并传递一个 defaultPathname 给它，这样在应用程序启动时会显示选定的屏幕。在这个容器内，您必须放置选定的导航器并描述用于导航的屏幕集合。每个屏幕必须有一个名称和一个要渲染的组件。

通过 `StackNavigator` 进行导航

StackNavigator 是主要的导航方法，用于实现屏幕切换的逻辑。

import { NavigationContainer, StackNavigator } from '@dark-engine/native-navigation';

const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Feed'>
      <StackNavigator.Root>
        <StackNavigator.Screen name='Feed' component={Feed} />
        <StackNavigator.Screen name='Friends' component={Friends} />
        <StackNavigator.Screen name='Profile' component={Profile} />
        <StackNavigator.Screen name='Settings' component={Settings} />
      </StackNavigator.Root>
    </NavigationContainer>
  );
});

通过 `TabNavigator` 进行导航

TabNavigator 是一个围绕 StackNavigator 的包装器，它会在底部显示标签按钮来控制屏幕。通过使用 StackNavigator 的包装方法，您还可以通过抽屉或模态实现导航策略。

import { NavigationContainer, TabNavigator } from '@dark-engine/native-navigation';

const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Feed'>
      <TabNavigator.Root>
        <TabNavigator.Screen name='Feed' component={Feed} />
        <TabNavigator.Screen name='Friends' component={Friends} />
        <TabNavigator.Screen name='Profile' component={Profile} />
        <TabNavigator.Screen name='Settings' component={Settings} />
      </TabNavigator.Root>
    </NavigationContainer>
  );
});

您可以通过向 TabNavigator.Root 传递 bottomNavigationOptions 并向 TabNavigator.Screen 传递 renderTab 来自定义标签视图，以渲染带有图标的标签。

导航到屏幕

要导航到新的屏幕，您需要使用由 useNavigation 钩子提供的 navigateTo 方法。

import { useNavigation } from '@dark-engine/native-navigation';

const { navigateTo } = useNavigation();

return (
  <StackLayout>
    <Button onTap={() => navigateTo('/Dashboard')}>Dashboard</Button>
  </StackLayout>
);

该方法支持传递 NavigationOptions，其中包含新屏幕的参数，以及启用支持动画过渡的标志。

import { CoreTypes } from '@nativescript/core';
import { useNavigation, TransitionName } from '@dark-engine/native-navigation';

navigateTo('/Profile', {
  params: { id: 25 },
  animated: true,
  transition: {
    curve: CoreTypes.AnimationCurve.easeInOut,
    name: TransitionName.slide,
    duration: 200,
  }
});

返回导航

const { goBack } = useNavigation();

return (
  <StackLayout>
    <Button onTap={() => goBack()}>back</Button>
  </StackLayout>
);

访问参数

const { params } = useNavigation();
const id = Number(params.get('id'));

useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)
    .then(x => x.json())
    .then(x => setAlbum(x));
}, [id]);

嵌套屏幕

您可以通过嵌套导航器来创建嵌套屏幕，例如 /Home/Dashboard、/Home/Profile 等等。

const Home = component(() => {
  return (
    <StackLayout height='100%'>
      <StackNavigator.Root>
        <StackNavigator.Screen name='Dashboard' component={Dashboard} />
        <StackNavigator.Screen name='Profile' component={Profile} />
      </StackNavigator.Root>
    </StackLayout>
  );
});

const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Home/Dashboard'>
      <TabNavigator.Root>
        <TabNavigator.Screen name='Home' component={Home} />
        <TabNavigator.Screen name='Settings' component={Settings} />
        <TabNavigator.Screen name='Contacts' component={Contacts} />
      </TabNavigator.Root>
    </NavigationContainer>
  );
});