web-dev-qa-db-ja.com

ReactナビゲーションV5下のタブを非表示

React Native Navigation v5を使用して画面上のタブを非表示にしたいのですが。

私はドキュメントを読んでいますが、v5でこれを更新したようではなく、<v4の方法を参照しています。

これが私のコードです：

import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const SettingsStack = createStackNavigator();
const ProfileStack  = createStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        </SettingsStack.Navigator>
    )
}

function ProfileStackScreen() {
    return (
        <ProfileStack.Navigator>
            <ProfileStack.Screen name="Home" component={Home} />
        </ProfileStack.Navigator>
    )
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={ProfileStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

私が試したこと：

  1. 関数のオプションにアクセスし、そのように非表示にします。
  2. 画面にプロップとしてtabBarVisibleを渡します。

React Navigation v5の画面でタブを非表示にする正しい方法は何ですか？.

javascriptreact-nativereact-navigationreact-native-navigation
1
Ash._

私はこの問題を抱えていて、公式ドキュメントでも解決策を見つけることができませんでした（githubの問題が原因でリンクが壊れました）いくつかの試行と調査の後、解決策を見つけました下部のタブナビゲーターコンポーネントからそれを実現するため

<Tab.Navigator tabBarOptions={stackOptions} >
  <Tab.Screen
    name={"market"}
    component={MarketNavigator}
    options={navigation => ({
      // tabBarIcon: ,
      tabBarVisible: navigation.route.state.index > 0 ? false : true
    })}
  />
</Tab.Navigator>

それが誰かを助けることを願っています！

0
ishab acharya

スタックナビゲーターにタブナビゲーターをネストさせることにより、ナビゲーションを再構築する必要があります。詳細はこちら hiding-tabbar-in-screens

このようにして、スタックナビゲーターをyourTabナビゲーターにネストすることも可能です。 SettingsStack

これにより、ユーザーが[設定]画面と[更新の詳細]画面にいる場合、タブバーは表示されますが、[プロファイル]画面には表示されません。

import Home from './components/Home';
import Settings from './components/Settings';
import UpdateDetails from './components/UpdateDetails';
import Profile from './components/Profile';

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();
const StackSettings = createStackNavigator();
const Tab = createBottomTabNavigator();

function SettingsStack() {
    return (
        <StackSettings.Navigator>
            <StackSettings.Screen name="Settings" component={Settings} />
            <StackSettings.Screen name="UpdateDetails" component={UpdateDetails} />
        </StackSettings.Navigator>
    )
}

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Settings" component={SettingsStack} />
    </Tab.Navigator>
  );
}


export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Profile" component={Profile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
0
Mark

ネストされた画面を表示してからタブバーのオプションを探して使用することは、StackNavigator関数でこの単純な条件を使用するよりも非表示にする必要があります。

  function HistoryStack({navigation, route}) {
if (route.state.index === 0) {
 navigation.setOptions({tabBarVisible: true});
 } else {
 navigation.setOptions({tabBarVisible: false});
}
return (
<Historys.Navigator initialRouteName={Routes.History}>
  <Historys.Screen
    name={Routes.History}
    component={History}
    options={{headerShown: false}}
  />
  <Historys.Screen
    name={Routes.HistoryDetails}
    component={HistoryDetails}
    options={{headerShown: false}}
  />
</Historys.Navigator>
  );
}
0
Safi Deraiya