1. カスタムルーティングご存知のとおり、ネイティブ Android でも iOS でも、デフォルトのルーティング スタック管理クラスがあります。 React Native はルート管理用のコンポーネントを公式に提供していないため、ルートを管理するには react-navigation プラグインが提供する Stack.Navigator コンポーネントを使用する必要があります。 Stack.Navigator は名前付きルートを使用します。いわゆる名前付きルートは、ルートを使用する前に宣言する必要があることを意味します。ルーティング ページの管理を容易にするために、以下に示すように、ルートを screens パッケージなどの統一された場所に配置します。 次に、プロジェクトの screens/index.js ファイルに新しい定数を作成します。これは、次に示すように、宣言されたルートを管理するために主に使用されるものです。 エクスポートconstスタック=[ { 名前: 'AllMovieScreen', コンポーネント: AllMovieScreen、 オプション: {headerShown: false}, }, { 名前: 'CitySelectScreen', コンポーネント: CitySelectScreen、 オプション: {title: '都市を選択'}, }, .... //他のルーティングページを省略]; 次に、ルーティングジャンプ、リターン、その他の操作を実装するための新しい MainStackScreen.js ファイルを作成します。同時に、MainStackScreen クラスのもう一つの機能は、ナビゲーション バーのスタイルを統一することです。コードは次のとおりです。 MainStack を createStackNavigator() に追加します。 関数 MainStackScreen({ナビゲーション}) { 戻る ( <メインスタック.ナビゲーター 初期ルート名="アプリ" 画面オプション={{ ヘッダータイトル配置: 'center'、 ヘッダースタイル: { 影オフセット: {幅: 0, 高さ: 0}, 影色: '#E5E5E5', 背景色: '#fff', }, ジェスチャー有効: true、 ヘッダーバックタイトル表示: false、 ヘッダー左: () => ( <タッチ可能な不透明度 onPress={() => navigation.goBack()} スタイル={{パディング: 10, パディング右: 30}}> <アイコン名="chevron-thin-left" サイズ={20} 色="#222222" /> </TouchableOpacity>)、 }}> <メインスタック.スクリーン 名前="アプリ" コンポーネント={下部タブ} オプション={{headerShown: false}}/> {stacks.map((item, index) => ( <メインスタック.スクリーン キー={index.toString()} 名前={アイテム名} コンポーネント={item.component} オプション={item.options}/> ))} </メインスタック.ナビゲーター> ); } デフォルトの MainStackScreen をエクスポートします。 上記のコードでは、screens/index.js ファイルを作成してアプリケーション ルートを宣言し、MainStackScreen クラスの map ループを使用してルートの登録を完了します。ご覧のとおり、上記の処理の後、ルーティング管理は非常に明確になります。新しいページがある場合は、screens/index.js ファイルにルートを追加するだけで済みます。 2. タブナビゲーションReact Native アプリケーション開発では、 react-navigation はルーティング管理機能を提供するだけでなく、タブナビゲーションとドロワーナビゲーションもサポートします。また、最新バージョンでは、タブナビゲーション、ドロワーナビゲーション、スタックナビゲーションが依存するライブラリが別々になっているため、開発プロセス中に個別にインストールする必要があります。 タブナビゲーションの場合、プロジェクトにタブナビゲーションに必要な bottom-tabs ライブラリをインストールする必要があります。コマンドは次のとおりです。 npm インストール @react-navigation/bottom-tabs Tab ナビゲーションを作成するには、createBottomTabNavigator() メソッドが必要です。このメソッドは、それぞれ Tab.Navigator コンポーネントと Tab.Screen コンポーネントに対応する navigator と route という 2 つのプロパティを提供する必要があります。最後に、以下に示すように、NavigationContainer コンポーネントを使用してそれらをラップする必要があります。 '@react-navigation/bottom-tabs' から {createBottomTabNavigator} をインポートします。 '@react-navigation/native' から {NavigationContainer} をインポートします。 定数 BottomTabs = createBottomTabNavigator(); デフォルト関数BottomTabScreen()をエクスポートする{ 戻る ( <ナビゲーションコンテナ> <BottomTabs.Navigator initialRouteName="ホーム" screenOptions={({route}) => ({ タブバーアイコン: ({focused}) => { 戻る ( <画像ソース={ focused? tabImage[`${route.name}_active`] : tabImage[ルート名] } スタイル={{幅: 26, 高さ: 26}}/> ); }})}} タブバーオプション={{ アクティブティントカラー: 'トマト'、 非アクティブTintColor: 'グレー'、 スタイル: { 背景色: '#fff', }, }}> <BottomTabs.Screen name="ホーム" コンポーネント={ホーム画面} オプション={{ tabBarLabel: '映画', }}/> .... //他のコードは省略 <BottomTabs.Screen name="私のもの" コンポーネント={MineScreen} オプション={{ tabBarLabel: 'マイ', }}/> </BottomTabs.Navigator> </ナビゲーションコンテナ> ); } 同時に、bottom-tabs プラグインは他の多くの便利なコンポーネントとプロパティも提供しており、開発者はニーズに応じて選択できます。上記のコードを実行すると、その効果は次の図に示されます。 3. データの返却場合によっては、次のページにジャンプし、次のページでデータを選択した後にポストバックする必要があることがあります。例えば: 上記のシナリオでは、アクティビティ リストをフィルターする必要があります。アクティビティ フィルター ページに移動した後、選択したアクティビティ タイプを返す必要があります。このシナリオでは、react-navigation をどのように処理すればよいでしょうか。 まず、以下に示すように、screens/index.js ファイルにアクティビティ タイプ ページを登録します。 { 名前: 'セレクタスクリーン', コンポーネント: SelectorScreen、 オプション: nav => { 定数{ルート} = nav; const {params = {}} = ルート; const {title = 'アクティビティタイプ', onRightPress = () => {}} = params; 戻る { タイトル、 ヘッダー右: () => ( <タッチ可能な不透明度 onPress={onRightPress} スタイル={styles.button}> <Text style={{color: '#fff', fontSize: 14}}>OK</Text> </タッチ可能な不透明度> )、 }; }, } 同時に、アクティビティ リスト ページからアクティビティ フィルタリング ページのデータが渡されます。そのため、使用する場合は、上記でカプセル化したルーティングツールを使用してジャンプ操作を実行するだけで済みます。コードは次のとおりです。 ナビゲート('セレクタスクリーン', { 値: カテゴリ.map(c => c.andGroupName)、 デフォルト値: カテゴリ名、 onConfirm: changeCategory、 }); ご覧のとおり、フィルター ページで選択されたデータを取得するために、ジャンプ時に onConfirm コールバック関数を定義しました。次に、新しく作成したアクティビティ フィルタリング ページで前のページから渡されたアクティビティ データを受け取り、以下に示すようにリストを使用して表示します。 関数SelectorScreen({ナビゲーション、ルート}) { const {values = [], defaultValues = [], onConfirm} =route.params || {}; const [選択された、setSelected] = useState(defaultValues); const _onRightPress = () => { onConfirm(選択済み); ナビゲーション.goBack(); }; 使用効果(() => { ナビゲーション.setParams({onRightPress: _onRightPress}); }, [選択済み]); 定数onPressItem = val => { arr = [] とします。 arr = [値]; 選択されたものをセットします。 }; const レンダリングアイテム = ({item}) => { const レンダリング右 = () => { const isSelected = selected.includes(item); 戻る ( <リスト項目 テキスト={アイテム} レンダリング右={レンダリング右} onPress={() => onPressItem(item)} /> ); }; 戻る ( <表示スタイル={styles.bg}> <フラットリスト keyExtractor={(item, index) => アイテム + インデックス} データ={値} レンダリングアイテム = {レンダリングアイテム} ListFooterComponent={<ビューの高さ={120} />}} /> </表示> ); }; const スタイル = StyleSheet.create({ .... // スタイルコードを省略 }); デフォルトの SelectorScreen をエクスポートします。 アクティビティの種類を選択した後、選択した結果を前のページに戻すにはどうすればよいですか?このとき、以下のように、上で定義した onConfirm コールバック関数が使用されます。 const {values = [], defaultValues = [], onConfirm} =route.params || {}; const _onRightPress = () => { onConfirm(selected); //onConfirm コールバック関数はデータを返します navigation.goBack(); }; 要約するReact Nativeカスタムルーティング管理に関するこの記事はこれで終わりです。React Nativeカスタムルーティング管理に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Django2.* + Mysql5.7 開発環境統合チュートリアル図
WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...
序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...
目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...
技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...
Webページを作るときに、区切り線hrを使うことがありますが、IE6やIE7で表示するのは非常に苦痛...
目次背景解決策1: 古いデータをバックアップするオプション2: テーブルを分割する解決策3: tid...
目次1 違い1.1 スペース占有1.2 表現範囲1.3 タイムゾーン2 テスト3つの選択肢MySQL...
序文: Docker はオープンソースのアプリケーション コンテナ エンジンであり、開発者はこれを使...
序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...
グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...
この記事では、星空アニメーションを実現するための高度な CSS3 LESS のサンプルコードを次のよ...
1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...
本日の記事では、主にNginxのリロードプロセスについて紹介します。実は前回の記事では、nginx ...
1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...
前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...