React Native JSSサンプルアプリケーションの概要

React Native JSSアプリにおけるルーティングと状態管理

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JSSで構築されたReact Nativeアプリケーションは、接続および接続トンネルモードでレイアウトサービスに基づく動的ルーティング、切断モードでローカルルートデータファイルを使用し、ルートやナビゲーションの変更によってアプリの状態変更をトリガーします。したがって、主要な実行フローの追跡はルート設定から始まります。

クライアント側ルーティング

すべてのルートはsrc/App.jsファイル内でreact-navigation NPMパッケージを使って定義されます。例えば:

import { createAppContainer } from 'react-navigation' import { createStackNavigator } from 'react-navigation-stack'

const Navigator = createStackNavigator({ Home: { screen: Home }, Styleguide: { screen: Styleguide } }, { initialRouteName: 'Home' })

const AppNavigator = createAppContainer(Navigator)

export default AppNavigator

すべてのルートには、ルートのプロパティに提供されたデータに基づいてコンポーネントのレンダリングを処理するrender関数を持つコンポーネントが含まれています。

const Home = ({ navigation }) => ( <Route path='/' render={({ data }) => } /> );

コンポーネントは/src/screens/Route.jsファイル内で定義されます。クライアントでルートや画面にアクセスすると、アプリケーションは現在のルートのレイアウトサービスを取得します。アプリのルートおよび言語状態は維持されます。ルートデータはルートの残りの構造を決定し、どのコンポーネントとそのコンテンツデータが各プレースホルダーに存在するかを定義します。

この記事を改善するための提案がある場合は、お知らせください!