rn navio
v0.1.0
Navioは、React Navigationの上に構築されたReactネイティブのナビゲーションライブラリです。主な目標は、アプリのレイアウトを1つの場所に構築し、TypeScriptのパワーを使用してオートコンプリートやその他の機能を提供することにより、DXを改善することです。
NAVIOを使用すると、さまざまな種類のアプリを簡単に作成できます。ボトムタブベース、シンプルなシングルスクリーン、および引き出しレイアウトを備えたアプリです。ボンネットの下のナビゲーター、画面、スタック、タブ、引き出しのすべてのボイラープレートコード構成を処理するため、アプリのビジネスロジックの開発に集中できます。
Navioある意味であなたを助けたなら、これでそれをサポートしてください
☣Navioは依然として若い図書館であり、将来的に壊れた変化があるかもしれません。 Navioが生産対応であるかどうかを確認してください
ヤーンはrn-navioを追加します
NavioはReact Navigationの上に構築されているため、次のライブラリをインストールする必要があります。
yarn add @race-navigation/stack @race-navigation/native @race-navigation/nativestack @race-navigation/botton-tabs @race-navigation/drawer
詳細については、インストール手順を確認してください。
このコードは、1つの画面で簡単なアプリを構築します。
// app.tsximport {text} from 'React-native'; import {navio} from 'rn-navio'; const home =（）=> {
return <text>ホームページ</text>;}; const navio = navio.build（{{
画面：{home}、
スタック：{Homestack：['home']、
}、
root： 'stacks.homestack'、}）; export default（）=> <navio.app />;// app.tsximport {text} from 'React-native'; import {navio} from 'rn-navio'; const home =（）=> {
return <text>ホームページ</text>;}; const settings =（）=> {
return <text> settings page </text>;}; const navio = navio.build（{{
画面：{home、settings}、
スタック：{homestack：['home']、settingsstack：['settings']、
}、
タブ：{apptabs：{layout：{hometab：{stack： 'homestack'}、settingstab：{stack： 'settingsStack'}、}、}、
}、
root： 'tabs.apptabs'、}）; export default（）=> <navio.app />;より複雑でエキゾチックな例をご覧になりたい場合は、このリンクをフォローしてください。
Expo-StarterのNavioを使用して新しいプロジェクトをブートストラップできます。
NPX CLI-RN新しいアプリ
博覧会のスナックで図書館で遊んでください。
Navioは、アプリ内でナビゲーションを実行するためのアクションのコレシトンを提供します。想定してください、あなたはnavioオブジェクトを持っています：
.N
React Navigationの現在のナビゲーションオブジェクト。これらのアクションのいずれかを実行できます。
.push(name, params?)
スタックの上にルートを追加し、前方に移動します。
.goBack()
歴史の前のルートに戻ることができます。
.setParams(name, params)
特定のルートのパラメーションを更新できます。
.setRoot(as, rootName)
新しいアプリルートを設定します。 Stacks 、 Tabs 、 Drawersを切り替えるために使用できます。
スタック関連のアクション。
.stacks.push(name)
スタックの上にルートを追加し、前方に移動します。タブバーを非表示にできます。
.stacks.pop(count?)
スタック内の以前の画面に戻ります。
.stacks.popToTop()
スタックの最初の画面に戻り、他のすべてを却下します。
.stacks.setRoot(name)
スタックから新しいアプリルートを設定します。
タブ関連のアクション。
.tabs.jumpTo(name)
タブナビゲーターの既存のルートにジャンプするために使用されます。
.tabs.updateOptions(name, options)
特定のタブのオプションを更新します。バッジカウントを変更するために使用されます。
.tabs.setRoot(name)
タブから新しいアプリルートを設定します。
引き出し関連のアクション。
.drawers.open()
引き出しペインを開くために使用されます。
.drawers.close()
引き出しペインを閉じるために使用されます。
.drawers.toggle()
閉じた場合は引き出しペインを開くか、開いている場合は閉じるために使用します。
.drawers.jumpTo(name)
引き出しナビゲーターの既存のルートにジャンプするために使用されます。
.drawers.updateOptions(name, options)
特定の引き出しメニューコンテンツのオプションを更新します。タイトルを変更するために使用されます。
.drawers.setRoot(name)
引き出しから新しいアプリルートを設定します。
モーダル関連のアクション。
.modals.show(name, params)
既存のモーダルとパスパラマを表示するために使用されます。
.modals.getParams(name)
.show（）メソッドのモーダルに対して渡されたパラメーションを返します。
便利なフック。
.useN()
React NavigationからのuseNavigation()フックの複製。ナビゲーションオブジェクトにアクセスするために、画面内の利便性に使用されます。ドキュメント。
.useR()
React NavigationからのuseRoute()フックの複製。ルートオブジェクトにアクセスするために、画面内の便利さに使用されます。ドキュメント
.useParams()
ナビゲーションルートパラメーションへの迅速なアクセスに使用されます。パラメージを渡すときに画面内の便利さに使用されます。
NAVIOには、アプリレイアウトを構築するためにscreensと少なくとも1つのstacks必要です。 tabs 、 drawers 、 modals 、 root 、 hooks 、 defaultOptionsはオプションであり、より高度なアプリレイアウトに使用されます。
これらは、Navioを使用したアプリのメインレンガです。構築するスタックのためにそれらを再利用できます。
画面は、プレーン反応コンポーネントを渡すことで定義できます。画面を説明するオプションを渡す場合は、オブジェクトも渡すことができます。
'@app/screens'; const navio = navio.build（{{screen1、screen3}をimport {screen1、screen3}
画面：{1つ：screen1、2：（）=> {return <> </>;} 3：{component：screen3、options ：（ props）=>（{title： 'threeone'}）}}
}、}）;スタックは、以前に定義されたScreensを使用して構築されています。 IDEは、より良いDXのために自動補完を支援する必要があります。
スタックは、一連のScreensを渡すことで定義できます。ナビゲーターをスタックするためにいくつかのオプションを渡したい場合は、オブジェクトを渡すことができます。
const navio = navio.build（{
//画面は前のステップから取得されます
スタック：{mainStack：['one'、 'two']、examplestack：{screens：['three']、navigatorprops：{screenlisteners：{focus：（）=> {}、}、}、}、
}、}）;タブは、以前に定義されたScreens 、 Stacks 、 Drawers使用して構築されています。
タブは、オブジェクトをcontent 、およびオプションでナビゲーター用の小道具で渡すことで定義できます。
コンテンツは、 Stacks 、 Drawers 、 Screensの配列、またはボトムタブのスタックとオプション（タイトル、アイコンなどを説明する）を記述するオブジェクトの1つとして取得できます。
const navio = navio.build（{
//画面とスタックは前のステップから取得されます
タブ：{apptabs：{layout：{maintab：{stack：['one'、 'two']、// or drawer： 'somedrawer'、options：（）=（{title： 'main'、}）、 }、exampletab：{stack： 'examplestack'、//または引き出し： 'Somedrawer'、options：（）=>（{title： 'example'、 }）、}、}、options：{...}、// optional navigatorprops：{...}、// optional}、
}、}）;引き出しは、以前に定義されたScreens 、 Stacks 、 Tabsを使用して構築されています。
引き出しは、オブジェクトをcontent 、およびオプションでナビゲーター用の小道具で渡すことで定義できます。
コンテンツは、 Stacks 、 Tabs 、 Screensの配列、またはボトムタブのスタックとオプション（タイトル、アイコンなどを説明する）を記述するオブジェクトの1つとして取得できます。
const navio = navio.build（{
//画面とスタックは前のステップから取得されます
引き出し：{maindrawer：{layout：{main： 'mainstack'、例： 'examplestack'、playground：['one'、 'two'、 'three']、}、option：{...}、//オプションNavigatorProps：{...}、//オプション}、
}、}）;モーダルは、以前に定義されたScreensとStacksを使用して構築されます。アプリを使用している間、いつでもそれらを表示/表示できます。
モーダルは、一連のScreensまたはStacksの名前を渡すことで定義できます。
const navio = navio.build（{
//画面とスタックは前のステップから取得されます
モーダル：{examplemodal：{stack： 'examplestack'、options：{...}、// optional}、
}、}）;これはアプリのルート名です。 Stacks 、 Tabs 、またはDrawersの1つにすることができます。
後でnavio.setRoot('drawers', 'AppDrawer')または<navio.App />コンポーネントのinitialRouteName変更することで、後でアプリのルートを変更できます。
const navio = navio.build（{
//スタック、タブ、引き出しは、以前の例から取られています
root： 'tabs.apptabs'、//生成された各Stacks 、 Tabs 、またはDrawersナビゲーターで実行されるフックのリスト。ダークモードや言語の変更に役立ちます。
const navio = navio.build（{
フック：[usetranslation]、}）;アプリ内で生成された各Stacks 、 Tabs 、 Drawer 、またはModalの画面、またはモーダルの画面ごとに適用されるデフォルトオプション。
すべてのコンテナとTabsとDrawerの画面オプションNote headerShown: falseデフォルトでは（不要なナビゲーションヘッダーを非表示にするため）。タブを隠すときにネイティブ< Backボタンを持ちたい場合に役立つ場合があるため、いつでも変更できます（新しいStackを押します）。
const navio = navio.build（{
defaultoptions：{stacks：{screen：{headershadowvisible：false、headertintcolor：colors.primary、}、container：{headershown：true、}、}、}、{screen：tabdefaultoptions、}、引き出し：{screendefaultotions、}
}、}）;NAVIOは、レイアウトが定義された後、アプリのルートコンポーネントを生成します。 registerRootComponent()に直接渡すか、追加のプロバイダーと一緒にラップしたり、アプリの起動前にロジックを追加したりするために使用できます。
const navio = navio.build（{...}）; export default（）=> <navio.app /> navio.setRoot('drawers', 'AppDrawer')または<navio.App />コンポーネントのinitialRouteName変更することで、アプリのルートを変更できます。
これは最もよくある質問です（ここ、ここ、ここ）。以下に、2つのソリューションがあります。
// .Navigate of React Navigationオブジェクトの方法を使用し、parmsnavio.n.navigate（ 'mymodal'、{screen： 'screenname'、params：{userid： 'someid'}}）; // screenconst screen =アクセスパラメーション= （）=> {
const {userid} = navio.useparams（）;};v0.1.+を使用した新しいアプローチ// .modals.show navio and pass paramsnavio.modals.show（ 'mymodal'、{userid： 'someid'}）; // screenconst creen =（）=> {
const {userid} = navio.modals.getParams（ 'mymodal'）;};Expo Routerは、Expoを使用してUniversal Reactネイティブアプリケーション向けに設計されたルーティングライブラリです。ファイルベースのルーティングシステムで動作するため、単一のコードベースを使用して、ネイティブ（iOSとAndroid）とWebプラットフォームの両方のアプリケーションを作成しようとする開発者に最適です。
一方、Navioは、React Native Navigationで見られるレイアウト構築方法と同様に、静的構成アプローチを採用しています。 NAVIOは、主にネイティブプラットフォーム（iOSとAndroid）をターゲットにしており、Web互換性の最適化にはあまり重点を置いていません。 NAVIOでは、アプリケーションレイアウトは単一のファイル内で構成されています。
両方のライブラリは、React Navigationの上に構築されており、それと一緒に使用できます。これは、すべてのフック、アクション、深いリンク機能、およびReactナビゲーションのその他の機能が両方でシームレスに動作することが期待されることを意味します。特に、React NavigationはV7（まだリリースされていない）に静的構成を導入します。
NavioはBuddy Marketplace（iOS App）に不可欠であり、わずか2〜3か月で発売するのに役立ちました。アプリでの使用は、毎日ユーザーを獲得しており、新機能を高速にしているため、基本的なセットアップタスクを扱う代わりに、貴重なビジネスロジックの作成に集中できるようになります。
ただし、Navioはまだ若いライブラリであり、シームレスな深いリンク統合など、いくつかの機能がありません。これは、生産アプリでの完全な効果にとって重要です。ライブアプリの一部であるため、定期的に更新して、新しい機能を追加する予定です。将来の計画セクションをチェックすることで、何が来るかを見ることができます。
あなたがあなたのアプリでNavioを使用しているなら、私はあなたから聞いてみたいです、そしてあなたが探している追加機能があるならば。
Navioは、Reactナビゲーションを使用してアプリレイアウトの繰り返しコードを最小限に抑えることを目的とした実験的（そして少し奇妙な）プロジェクトとして始まりました。私は静的構成の概念が好きで、アプリレイアウトのセットアップ全体が単一のファイルに凝縮されています。 Expo-Starter内でそれを実装し、肯定的なフィードバックを受け取った後、私はそれをActive Mobileアプリに統合することにしました。 Navioに統合したい追加機能があります。最もエキサイティングな目標の1つは、React Navigationをマージし、ネイティブナビゲーション機能を統合APIに反応させ、開発プロセスをさらに合理化することです。
ライブラリに追加したいことがまだいくつかあります：
.updateOptions()特定のタブと引き出しの場合。
タブは引き出し内に配置でき、その逆も同様です。
小道具をモーダルに渡します。
小道具を画面にlinkingことにより、ディープリンクを簡単にします。問題。
RNNとRNNスクリーンを追加してNavioユニバーサルを作成します。
Navio FuntionalityとAppレイアウトを拡張します。
NavioとReact Navigationの簡単な統合（例：navio.stack（））
TypeScriptの問題 @ index.tsxファイル。
提案については、お気軽に問題を開いてください。
このプロジェクトはMITライセンスです
