React Native JSSアプリでのルーティングと状態管理

Version:

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

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

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

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

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

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関数を持つ <Route/> コンポーネントが含まれています。

const Home = ({ navigation }) => (
  <Route 
    path='/'
    render={({ data }) =>
      <Placeholder name='jss-main' rendering={data} navigation={navigation} />
    }
  />
);

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

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