web-dev-qa-db-ja.com

Reactナビゲーションスタックナビゲーション内でタブバーを非表示にする方法

次のスタックナビゲーションと画面があります。

export const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Categories: CategoriesScreen,
    Products: ProductsScreen,
    ProductDetails: ProductDetailsScreen,
})

ProductDetailsS​​creenでのみタブを非表示にしたい

export const hideTabBarComponents = [
    'ProductDetails',
]

export const MainTabs = createBottomTabNavigator(
    {
        Home: HomeStack,
        Favorite: FavoriteScreen,
        Account: AccountScreen,
        Help: HelpScreen,
        Events: EventsScreen
    },
    {
        navigationOptions: ({ navigation }) => ({

            tabBarIcon: ({ focused, tintColor }) => {
                ...
            },
            tabBarLabel: ({ focused, tintColor }) => {
                ...
            },

            tabBarVisible: ! hideTabBarComponents.includes(navigation.state.routeName)

        }),
    }
);

スタックナビゲーションからタブナビゲーションにオプションを渡せない問題

スタック画面のすべてがそれらの1つだけではない

react-nativereact-navigation
7
Ahmad Alselwadi

少し検索した後、次のコードで問題が解決しました：

HomeStack.navigationOptions = ({ navigation }) => {

    let tabBarVisible = true;

    let routeName = navigation.state.routes[navigation.state.index].routeName

    if ( routeName == 'ProductDetails' ) {
        tabBarVisible = false
    }

    return {
        tabBarVisible,
    }
}
7
Ahmad Alselwadi

React Navigation 5の場合、スタックコンポーネント内でこれを行うことができます。

props.navigation.dangerouslyGetParent().setOptions({
  tabBarVisible: false
});

https://reactnavigation.org/docs/en/navigation-prop.html#setoptions---update-screen-options-from-the-component

ただし、これを使用する場合は注意してください。コンポーネントをアンマウントしたら、tabBarVisibleをtrueにリセットする必要があります。

たとえば、ReactフックはStackコンポーネント内にあります。

    useEffect(() => {
      const parent = props.navigation.dangerouslyGetParent();
      parent.setOptions({
        tabBarVisible: false
      });
      return () =>
        parent.setOptions({
          tabBarVisible: true
        });
    }, []);

または、次のように[戻る]ボタンを押して、Stack.ScreenコンポーネントのtabBarVisibleをリセットできます。

    const StackNav = (props) => (
      <Stack.Screen
        name='name'
        component={Name}
        options={{
          headerTitle: 'Name',
          headerLeft: () => (
            <Text
              onPress={() =>
                props.navigation.setOptions({
                tabBarVisible: true
                })
              }
            >
              on back
            </Text>
          )
        }}
      />
    }

（2番目のアプローチの方が効果的です。）

2
Jordan Daniels

これは私がやった方法です。タブバーを非表示にするスタックを選択します。インデックスに基づいて選択できます。

AppStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
    if (navigation.state.index > 0) {
       tabBarVisible = false;
    }
    return {
       tabBarVisible
    };
};

これは、Reactナビゲーションの docs のリンクです。

0
Pratap Sharma

これは私のプロジェクトで使用したソリューションです。

下のタブナビゲーターがあり、ホームとプロファイルの2つのルートがあります。 ProfileHomePageルートは、スタックナビゲーションProfileStackNavigationをもたらします。

次に、ProfileStackNavigationに、下部のタブが表示されるはずのProfileHomePageと、下部のタブが表示されるべきではない他の子ページがあります。そのページにパラメータtabBarVisible: falseを追加しました。

最後に、MainTabNavigator ProfileHomePageルートに、現在のルートにパラメーターtabBarVisibleがあるかどうかをテストするために、navigationOptions関数を追加しました。

const ProfileStackNavigation = createStackNavigator(
  {
    ProfileHomePage: ProfileHomePage,
    AboutAppPage: {screen: AboutAppPage, params: {tabBarVisible: false}},
    DiaryPage: {screen: DiaryPage, params: {tabBarVisible: false}},
    FilesPage: {screen: FilesPage, params: {tabBarVisible: false}},
    NotificationsPage: {screen: NotificationsPage, params: {tabBarVisible: false}},
  },
  {
    initialRouteName: 'ProfileHomePage',
  },
);

const MainTabNavigator = createBottomTabNavigator(
  {
    HomePage: HomePage,
    ProfileHomePage: {
      screen: ProfileStackNavigation,
      navigationOptions: ({ navigation }) => {
        const {params = {}} = navigation.state.routes[navigation.state.index];
        const tabBarVisible = params.tabBarVisible === false ? params.tabBarVisible : true;
        return {
          tabBarVisible,
        }
      }
    },
  },
  {
    initialRouteName: 'HomePage',
    tabBarComponent: props => <AppFooterTab {...props} />,
  },
);
0
Marcelo Souza