質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

1286閲覧

react-navigation v4とv5を同時に使う

abbbbe123

総合スコア13

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/30 18:46

現状

React Native + ExpoとFirebaseを用いてスマホアプリ開発をしています。

質問

現在、それぞれの画面に遷移させるナビゲーションを作っています。
そこで、質問ですがreact-navigation v4とv5は混在させて記述してもよろしいのでしょうか。それとも統一させるべきなのでしょうか?

例)AppNavigator.js

import React from "react"; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import "react-native-gesture-handler"; import { createStackNavigator } from "react-navigation-stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; import { NavigationContainer } from "@react-navigation/native"; // ログイン、新規登録、ローディング画面 import LoginScreen from "./screens/LoginScreen"; import RegisterScreen from "./screens/RegisterScreen"; import LoadingScreen from "./screens/LoadingScreen"; // 基本画面 import PostScreen from "./screens/PostScreen"; import ProfileScreen from "./screens/ProfileScreen"; import HomeScreen from "./screens/HomeScreen"; import MessageScreen from "./screens/MessageScreen"; import NotificationScreen from "./screens/NotificationScreen"; // タブ遷移機能 react-navigation v5 const Tab = createBottomTabNavigator(); function AppTabNavigator() { return ( <NavigationContainer> {/* 初期画面 */} <Tab.Navigator initialRouteName="Home" activeColor="#e91e63" style={{ backgroundColor: "tomato" }} > {/* ホーム画面 */} <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: "Home", tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="home" color={color} size={size} /> ), }} /> {/* チャット画面 */} <Tab.Screen name="Message" component={MessageScreen} options={{ tabBarLabel: "Chat", tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="chat" size={size} color={color} /> ), }} /> {/* 投稿画面 */} <Tab.Screen name="Post" component={PostScreen} options={{ tabBarLabel: "Post", tabBarIcon: ({ tintColor }) => ( <MaterialCommunityIcons name="map-marker-plus" size={36} color="#E9446A" style={{ shadowColor: "#E9446A", shadowOffset: { width: 0, height: 0 }, shadowRadius: 10, shadowOpacity: 0.3, }} /> ), }} /> {/* 通知画面 */} <Tab.Screen name="Notification" component={NotificationScreen} options={{ tabBarLabel: "通知", tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="bell" color={color} size={size} /> ), }} /> {/* プロフィール画面 */} <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarLabel: "Profile", tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="account" color={color} size={size} /> ), }} /> </Tab.Navigator> </NavigationContainer> ); } // ログインと新規登録遷移 react-navigation v4 const AuthStack = createStackNavigator( { Login: LoginScreen, Register: RegisterScreen, }, { initialRouteName: "Login", } ); // 画面遷移 react-navigation v4 export default createAppContainer( createSwitchNavigator( { Loading: LoadingScreen, App: AppTabNavigator, Auth: AuthStack, }, { initialRouteName: "Loading", } ) );

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

v4,v5で記述どころか導入手順まで大きく異なります。
「混在して記述して良いのか」以前に、なぜ混在させなければならないのか、その理由を教えてください。
特に理由がない限り、良いか悪いかでいえば「悪い」です。

投稿2020/08/31 03:28

Hogeike

総合スコア293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

react-navigation v4とv5は混在させて記述してもよろしいのでしょうか

良い悪いの話であれば、悪いといえます。
そもそも混在させた記述で動作するのでしょうか?
いったんnode_modulesやキャッシュもろもろを削除してnpm installし直して動作するのなら、現状混在することで不具合は起きていないと判断することができます。
ただ、例えばv4には存在し、v5には存在していない記述をしている場合、提供元の匙加減でその記述が使えなくなる可能性はあるかなと思います。

投稿2020/08/30 23:22

nekoniki

総合スコア2411

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問