3

私は反応ネイティブでレベルアップしており、プロジェクトに取り組んでいます。したがって、次のようなインナー画面で下部のナビゲーションを非表示にしたい

- Dashboard
--- home <- hide bottom navigation
--- moment <- hide bottom navigation
--- period <- hide bottom navigation
--- contact <- hide bottom navigation
- Calendar
- Notification
- User

ダッシュボード画面のオプションを使用tabBarVisible: falseしてみましたが、ダッシュボード画面の下部のナビゲーションが内側の画面ではなく非表示になります。内側の画面で下部のナビゲーションを非表示にする最良の方法は何ですか?

ここに私のナビゲーションコードがあります:

ボトムナビゲーション

const BottomNavigation = () => (
  <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
    <Tab.Screen
      name={ScreenName.dashboard}
      options={{tabBarLabel: 'Dashboard'}}
      component={HomeNavigation}
    />
    <Tab.Screen
      name={ScreenName.calendar}
      options={{
        tabBarLabel: 'Calendar',
      }}
      component={Calendar}
    />
    <Tab.Screen
      name={ScreenName.notification}
      options={{
        tabBarLabel: 'Notification',
      }}
      component={Notification}
    />
    <Tab.Screen
      name={ScreenName.user}
      options={{
        tabBarLabel: 'User',
      }}
      component={User}
    />
  </Tab.Navigator>
);

ホームナビゲーション

const HomeNavigation = () => (
  <Stack.Navigator
    screenOptions={{
      title: null,
      headerStyle: {elevation: 0, shadowOpacity: 0},
    }}>
    <Stack.Screen
      name={ScreenName.home}
      component={Home}
      options={() => ({
        headerShown: false,
      })}
    />
    <Stack.Screen name={ScreenName.moment} component={Moment} />
    <Stack.Screen name={ScreenName.period} component={Period} />
    <Stack.Screen name={ScreenName.contact} component={Contact} />
  </Stack.Navigator>
);
4

2 に答える 2

0

バーを非表示にする画面で、tabBarVisible: falseを設定します。

<Tab.Screen
    name="InnerScreen"
    component={InnerScreen}
    options={{
      tabBarVisible: false, //like this
      tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
    }}
  />
于 2021-10-27T09:07:32.587 に答える