🎉 Представляем @akalli/navigation react-native navigation made easy

Вам надоело управлять сложными файлами router с охранниками и таким количеством маршрутов?

@akalli/navigation — это NPM-пакет, который с помощью простого объекта управляет такими вещами, как создание маршрутов, потока аутентификации, перевода и меню ящика для react-native приложений.

Содержание

Установка
Базовый пример:
Крючки
Расширенный режим

Установка

npm install @akalli/navigation react-native-svg @react-navigation/drawer @react-navigation/native @react-navigation/native-stack @react-navigation/stack @react-native-async-storage/async-storage

Отказ от ответственности:
Я знаю, что это выглядит много установок, но большинство из них — это @react-navigation, он имеет асинхронное хранилище для переводов и аутентификации, и react-native-svg для иконок, которые используются в ящике. Большинство из них, вероятно, вы уже используете в своем приложении.

Базовый пример:

// Sample screens

export const Main = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

export const Login = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

export const AnotherScreen = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

// Config base file

const routerConfig: IRouterProps = {
  appInitial: "Main", // Initial route
  screens: {
    MainScreens: {
      Main: Main,
    },
    AssistantScreens: {
      AnotherScreen: AnotherScreen,
    },
  },
};

// Router Provider
export default function App() {
  return <Router config={routerConfig} />;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все. Только этот routerConfig, и ваше приложение работает с маршрутами как по волшебству.

Крючки

useNav — Ярлыки для функций навигации.

const { navigate, routerState, routes, route, back, drawer } = useNav();

Вход в полноэкранный режим Выход из полноэкранного режима

useDict — Доступ к словарю, в основном, но не исключительно, для функций перевода.

const { lang, setLang, dict } = useDict("myModule");

Вход в полноэкранный режим Выход из полноэкранного режима

useAuth — Помощники аутентификации и статус.

Это будет работать только в том случае, если вы обернете свое приложение с помощью

const {
  data: { tokens, user, isAuthenticated },
  actions: { setTokens, setUser, setIsAuthenticated, clearAuth },
} = useAuth();

Войти в полноэкранный режим Выход из полноэкранного режима

Расширенный режим

Если вы хотите управлять более сложным решением маршрутизации с аутентификацией и т.д. Во-первых, вам нужно обернуть маршрутизатор AuthProvider.

Пример более сложной конфигурации:

const routerConfig: IRouterProps = {
  appInitialRoute: "Main", // Initial route
  authInitialRoute: "SignIn", // Auth initial route
  env: "prod", // authentication required to access app routes
  activeStack: "auth", // active stack, works only if not env = prod
  drawer: { // drawer props
    position: "left";
    bg: "#26a3c9",
    labelColor: "#e8d7cf",
    icons: {
      Main: MainScreenIcon,
      SignIn: SignScreenIcon,
      AnotherScreen: AnotherScreenIcon
    },
    CustomMenu: MyMenu // This option makes labelColor and icons be ignored because you have full control of the Menu component
  },
  defaultLanguage: 'es',
  dicts: { // dictionaries are the internationalization feature
    main: {
      en: {
        MY_TEXT: 'My text'
      },
      pt: {
        MY_TEXT: 'Meu texto'
      }
    }
  },
  bgs: { // background colors
    authStack: "#26a3c9",
    appStack: "#e8d7cf"
  },
  screens: {
    MainScreens: {
      Main: Main,
    },
    AssistantScreens: {
      AnotherScreen: AnotherScreen,
    },
    AuthScreens: {
      SignIn: SignIn,
    },
  },
};

Вход в полноэкранный режим Выход из полноэкранного режима

Этот проект независимый, но также является частью гораздо большего пакета шаблонов expo с простой установкой в npx.

Встречайте: @akalli/create-akalli-app

Все это с открытым исходным кодом на GitHub. Проверьте, а если возникнут сомнения или проблемы, вы можете создать вопрос или связаться со мной по электронной почте dsilva@akalli.com.br.

Спасибо всем, и счастливого кодинга.