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>
);
}
私が試したこと:
React Navigation v5の画面でタブを非表示にする正しい方法は何ですか?.
私はこの問題を抱えていて、公式ドキュメントでも解決策を見つけることができませんでした(githubの問題が原因でリンクが壊れました)いくつかの試行と調査の後、解決策を見つけました下部のタブナビゲーターコンポーネントからそれを実現するため
<Tab.Navigator tabBarOptions={stackOptions} >
<Tab.Screen
name={"market"}
component={MarketNavigator}
options={navigation => ({
// tabBarIcon: ,
tabBarVisible: navigation.route.state.index > 0 ? false : true
})}
/>
</Tab.Navigator>
それが誰かを助けることを願っています!
スタックナビゲーターにタブナビゲーターをネストさせることにより、ナビゲーションを再構築する必要があります。詳細はこちら 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>
);
}
ネストされた画面を表示してからタブバーのオプションを探して使用することは、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>
);
}