我正在使用带有Expo的Create React Native App来构建应用程序。按下TextInput时,我需要在特定视图中隐藏底部的标签栏。 Android默认情况下会向上推选项卡。
我不会触发标签栏隐藏,因为当不显示键盘时,标签栏必须在视图中。
"expo": "^31.0.2",
"react": "16.5.0",
"react-navigation": "^2.18.2"
我将各种堆栈导出为createBottomTabNavigator。
const SearchStack = createStackNavigator({
Search: SearchScreen,
Details: DetailsScreen,
Tag: TagScreen,
Category: CategoryScreen,
});
SearchStack.navigationOptions = {
tabBarLabel: 'Søg',
tabBarOptions: {
activeTintColor: Colors.themeColor,
showLabel: true,
},
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-search' : 'md-search'}
/>
),
};
export default createBottomTabNavigator({
HomeStack,
LinksStack,
InformationStack,
SearchStack,
});
我可以从导航器中隐藏选项卡,但我希望能够在特定视图中使用动态navigationOptions /状态来执行此操作。如果我在屏幕组件中使用tabBarVisible:false,则无法正常工作。
export default class SearchScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
text: '',
showClearTextIcon: false,
};
}
static navigationOptions = {
header: null,
title: 'Search',
};
/**
* Lifecycle function.
*/
componentDidMount() {
this.load()
this.props.navigation.addListener('willFocus', this.load)
}
您是否对在Android上存在键盘或单击按钮时如何隐藏选项卡有任何想法?
最佳答案
在要隐藏的屏幕上,标签栏更新导航选项。关键是使animationEnabled
为true,并使用tabBar
属性隐藏tabBarVisible
。
static navigationOptions = ({navigation}) => ({
tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
animationEnabled: true
)}
使tabBar在
componentWillMount
中可见:componentWillMount() {
const setParamsAction = NavigationActions.setParams({
params: {hideTabBar: true}
});
this.props.navigation.dispatch(setParamsAction);
}
然后在
componentWillUnmount
中再次隐藏tabBar:componentWillUnmount() {
const setParamsAction = NavigationActions.setParams({
params: {hideTabBar: false}
});
this.props.navigation.dispatch(setParamsAction);
}
您可以检查屏幕上的
this.state
或this.props
来确定何时希望发生这种情况。