TabNavigator 涵盖内容

Posted 2023-02-22

【中文标题】TabNavigator 涵盖内容

【英文标题】：TabNavigator covers content

【发布时间】：2019-02-26 01:25:27

【问题描述】：

我有一个包含列表的组件，该列表在底部被 TabNavigator 覆盖。任何想法如何解决它？只有造型方式吗？

render() 
    return (
        <Container style= paddingBottom: 5 >
          <Header
            backgroundColor='#1E6EC7'
            placement="left"
            leftComponent= icon: 'menu', color: '#fff' 
            centerComponent= text: 'Programul Zilei', style:  color: '#fff', fontWeight: 'bold', fontSize: 22  
            rightComponent=<Icon name="ios-add" style= color: 'white'  onPress=() => 
               const students=this.props;
               this.props.navigation.navigate('AddClass', students) />
          />
          <List>
            <FlatList
              data=this.props.classes
              keyExtractor=(item, index) => `$index`
              extraData=this.state
              renderItem=( item ) => 
                  <ListItem
                    leftIcon=<View style= flexDirection: 'row' ><Icon1 name="times" size=24 style= paddingRight: 10, color: 'red'  onPress=() => 
                      this.setState( currentStudent: wantedEmployee )
                      this.setState( currentClass: item )
                      this.props.classDeleteModalShowUp();
                       />                   
                  
            />
          </List>
        </Container>

【参考方案1】：

您可以hide the tab navigator 获取该特定屏幕设置 tabBarVisible 在navigationOptions 中为假。 但我认为问题是由于标题，您可以尝试使用react navigation header bar。 否则，您可以在容器中添加与标题相同高度的paddingBottom