我是本机反应的新手。我试图隐藏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}})似乎不起作用。