React Native JSSアプリでのルーティングと状態管理
Version: 22.x
日本語翻訳に関する免責事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSSで構築されたReact Nativeアプリケーションは、接続 および 接続トンネル モードのレイアウトサービスに基づく動的ルーティング、または切断 モードのローカルルートデータファイルを使用し、ルート/ナビゲーションの変更を使用してアプリの状態変更をトリガーします。したがって、プライマリ実行フローのトレースはルート設定から始まります。
クライアント側のルーティング
すべてのルートは、react-navigation NPMパッケージを使用してsrc/App.jsファイルで定義されます。例えば:
RequestResponse
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/> コンポーネントが含まれています。
RequestResponse
const Home = ({ navigation }) => (
<Route
path='/'
render={({ data }) =>
<Placeholder name='jss-main' rendering={data} navigation={navigation} />
}
/>
);
<Route/>コンポーネントは、/src/screens/Route.jsファイルで定義されます。クライアントでルート/画面にアクセスすると、アプリケーションは現在のルートのレイアウトサービスを取得します。アプリのルートと言語の状態は維持されます。ルート データは、ルートの残りの構造を決定し、各プレースホルダーにどのコンポーネントとそのコンテンツ データが存在するかを定義します。