Question

如果您能帮助我，我将非常高兴。我正在制作具有本机反应的移动应用程序。在这个程序中，我正在使用反应导航。我有app.js文件，其中包含用于底部标签导航的代码-home.js。在home.js中，我有2个类。第一类是主要的，第二类是按钮导航的。当我导航到第二页（第二类）时，我想隐藏底部的标签导航。我尝试了tabBarVisible：false，但这是行不通的。请帮帮我。代码：

// app.js
const TabNavigator = createBottomTabNavigator({
  Home:{
    screen:Home,
    navigationOptions:{
      tabBarLabel:'Главная',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-home" color={tintColor} size={24} />
      )
    }
  },

  Courses:{
    screen:Courses,
    navigationOptions:{
      tabBarLabel:'Courses',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-school" color={tintColor} size={24} />
      )
    }
  },
  Editor:{
    screen:Editor,
    navigationOptions:{
      tabBarLabel:'Editor',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-document" color={tintColor} size={24} />
      )
    }
  },

},{
  tabBarOptions:{
    activeTintColor:'#db0202',
    inactiveTintColor:'grey',
    style:{
      fontSize:3,
      height:45,
      backgroundColor:'white',
      borderTopWidth:0,
      elevation: 5
    }
  }
});



export default createAppContainer(TabNavigator);

// home.js

import React from 'react';
import { Font } from 'expo';

import { Button, View, Text, SafeAreaView, ActivityIndicator, ListView, StyleSheet, Image, Dimensions,
ScrollView } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json
import Icon from 'react-native-vector-icons/Ionicons'
import Courses from './Courses'

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

      const { navigate } = this.props.navigation;
    return (

      <SafeAreaView style={styles.MainContainer}>
      <ScrollView
      >
<ListView
         dataSource={this.state.dataSource}
         renderSeparator={this.ListViewItemSeparator}
         renderRow={rowData => (
           <>
      <Text
               onPress={() => {
                 /* 1. Navigate to the Details route with params */
                 this.props.navigation.navigate("Articles", {
                   otherParam: rowData.article_title,
                 });
               }}
             >
               {rowData.article_title}
             </Text>
              
           </>
         )}
       />
       </ScrollView
       >
</SafeAreaView>
    );
  }
}


class ArticleScreen extends React.Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;

    return {
      title: params ? params.otherParam : '',
    };
  };

  render() {
    const { params } = this.props.navigation.state;
    const article_title = params ? params.otherParam : '';


    return (
        <Text>{article_title}</Text>
    );
  }
}


  const RootStack = createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
      },
      Courses: {
        screen: Courses,
        navigationOptions: {
       header: null,
    }
      },
      Articles: {
        screen: ArticleScreen,
      },
    },
    {
      initialRouteName: 'Home',
    }
  );




  const AppContainer = createAppContainer(RootStack);

  export default class App extends React.Component {
    render() {
      return <AppContainer />;
    }
  }

Answer 1

这是工作小吃：https://snack.expo.io/ByS8igvC4

这里的关键是getActiveRoute这个函数，它在嵌套导航器的情况下递归搜索当前活动路线的名称：

const getActiveRoute = route => {
    if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
        return route.routeName;
    }

    const childActiveRoute = route.routes[route.index];
    return getActiveRoute(childActiveRoute);
}

在标签导航器中的用法：

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: 'Home',
        tabBarVisible: getActiveRoute(navigation.state) !== 'Articles'
      })
    },
    // ...other screens
  },
  {
    // ...navigator options
  }
);

Answer 2

我为您提供了一个简单的示例，其中包含createBottomNavigator，其中您有3个标签，而第三个标签有另一个堆栈，如createMaterialTopTabNavigator

export const FooterStack = createBottomTabNavigator(
  {
    First: {
      screen: FirstScreen
    },
    Second: {
      screen: SecondScreen
    },
    Third: {
      screen: ChildStack,
      navigationOptions: ({ navigation: { state: { index } } }) => ({
        tabBarVisible: index === 0 || index === 1 // Here is the Magic, you just have to pass the index in where you do not want to show the createBottomTabNavigator bar
      })
    }
  }
)

这是我的ChildStack

export const ChildStack = createMaterialTopTabNavigator(
  {
    FirstChild: {
      screen: FirstChildScreen // this is the index 0, so it will be not visible the BottomTabBar
    },
    SecondChild: {
      screen: SecondChildScreen // this is the index 1, so it will be not visible the BottomTabBar
    },
    ThirdChild: {
      screen: ThirdChildScreen
    }
  }
);

在底部隐藏底部标签导航

2 个答案: