🎉 @akalli/navigation react-native navigation을 소개합니다.

경비원과 너무 많은 경로로 복잡한router 파일을 관리하는 데 지치셨습니까?

@akalli/navigation은 경로 생성, 인증 흐름, 번역 및 react-native 앱용 서랍 메뉴와 같은 간단한 개체로 처리하는 NPM 패키지입니다.

설치

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

Disclaimer:
I know it looks a lot of installations, but most of them are @react-navigation stuff, it has async storage for translations and authentication, and react-native-svg for icons that are used in the drawer. Most of those probably you already use in your app.

기본 예:

// 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 - 인증 헬퍼 및 상태.

This will only work if you wrap your app with

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,
    },
  },
};

이 프로젝트는 독립적이지만 npx에 쉽게 설치할 수 있는 훨씬 더 큰 엑스포 템플릿 패키지의 일부이기도 합니다.

만나다: @akalli/create-akalli-app

GitHub의 모든 오픈 소스입니다. 체크 아웃하고 의심이나 문제가 있으면 문제를 만들거나 내 이메일[email protected]로 연락할 수 있습니다.

모두 감사합니다. 즐거운 코딩하세요.