代码之家  ›  专栏  ›  技术社区  ›  Yossi

本机基本选项卡-知道如何删除选项卡周围的边框吗?

  •  0
  • Yossi  · 技术社区  · 7 年前

    下面的屏幕截图是下面提供的代码的结果。知道如何删除选项卡周围的边框吗?

    enter image description here

    import React from 'react';
    import { SafeAreaView } from 'react-native';
    import { Container, Header, Title, Text, Tabs, Tab } from 'native-base';
    
    export default class Settings extends React.Component {
      static navigationOptions = {
        header: null
      };
    
      render() {
        return (
          <SafeAreaView style={{ flex: 1 }}>
            <Container
              style={{ flex: 1, backgroundColor: '#fff', marginTop: 30 }}>
              <Header hasTabs transparent>
                  <Title style={{ color: 'grey' }}>
                    Settings
                  </Title>
              </Header>
    
              <Tabs tabBarUnderlineStyle={{ backgroundColor: 'blue', height: 1 }}>
                <Tab heading="Tab1"
                  tabStyle={{ backgroundColor: 'white' }}
                  textStyle={{ color: 'grey' }}
                  activeTabStyle={{ backgroundColor: 'white' }}
                  activeTextStyle={{ color: 'blue' }}>
                  <Text>TODO: Tab1</Text>
                </Tab>
    
                <Tab heading="Tab2"
                  tabStyle={{ backgroundColor: 'white' }}
                  textStyle={{ color: 'grey' }}
                  activeTabStyle={{ backgroundColor: 'white' }}
                  activeTextStyle={{ color: 'blue' }}>
                  <Text>TODO: Tab2</Text>
                </Tab>
              </Tabs>
    
            </Container>
          </SafeAreaView>
        );
      }
    }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   RegularGuy    7 年前

    这不能用默认的tabs组件完成,有一个 workaround 使用可滚动的选项卡,如果您想修改源代码,这里有 workaround

    推荐文章