隐藏StackNavigator中堆积的MaterialBottomTabNavigator条形

时间:2018-08-30 06:37:44

标签: react-native react-navigation bottomnavigationview

我是本机反应的新手。我试图隐藏StackNavigator中堆积的MaterialBottomTabNavigator条。

我的App.json文件

import React, { Component } from 'react';
import { YellowBox, StatusBar, AppRegistry, View, Text, Image, Dimensions } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import AccountScreen from './Components/AccountScreen';
import CategoryView from './Components/CategoryView';
import ContentDetail from './Components/ContentDetail';
import TrendingList from './Components/TrendingList';
import NotificationScreen from "./Components/NotificationScreen";
import styles from './Styles';
import { Icon } from 'react-native-elements'

class MainActivity extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      categories: [],
      contentLoaded: false
    };
  }

  componentDidMount() {
    //Fetch some values
  }

  showDetail(content) {
    this.props.navigation.navigate('Detail',
      { content: content }
    );
  }

  setBottombarVisibility(nav) {
    this.props.navigation.setParams({tabBar:{visible:nav}}) //This is where I try to hide tabBar
  }

  render() {
    const { error, isLoaded, categories, contentLoaded } = this.state;
    let screenWidth = Dimensions.get('window').width;
    return (

      <View style={styles.MainContainer}>
        <Text style={styles.titleBar}>
          {'Home'}{'\n'}
        </Text>
            <CategoryView
              showDetail={this.showDetail.bind(this)}
              setBottombarVisibility={this.setBottombarVisibility.bind(this)}
              categories={categories}></CategoryView>
      </View>
    );
  }
}

ActivityProject = createMaterialBottomTabNavigator(
  {
    Home: {
      screen: MainActivity
    },
    Account: {
      screen: AccountScreen
    },
    Trending: {
      screen: TrendingListTab
    },
    Notification: {
      screen: NotificationScreen
    },
  }
);

let ContentDetailStack = createStackNavigator(
  {
    ContentDetail
  });

const StackViewNav = createStackNavigator(
  {
    Home: ActivityProject,
    Detail: ContentDetailStack
  }
);

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

我在CategoryView.js中有一个ScollableView。滚动时,它应该隐藏MaterialBottomTabNavigator的选项卡栏。

在我的CategoryView.js中,我尝试过

    onScroll(event) {
       var currentOffset = event.nativeEvent.contentOffset.y;
       var direction = currentOffset > this.state.offset ? 'down' : 'up';
       this.setState({
           time: -1,
           offset: currentOffset
       });
       this.props.setBottombarVisibility(direction === 'down');
    }

MainActivity中的setBottombarVisibility函数被触发,但是this.props.navigation.setParams({tabBar:{visible:nav}})似乎不起作用。

0 个答案:

没有答案