是否可以将图标添加到 Native Base 选项卡？

Question

Native Base docs 仅显示如何更改背景颜色、文本颜色和字体大小。但是好像不能给标签添加图标。

是否可能，或者我需要自己分叉并实施？

谢谢。

Answer 1

你需要自己去实现。我已经实现了这个功能。看看对你有没有帮助。

创建tabs.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,RefreshControl
} from 'react-native';
import IconTabs from 'react-native-vector-icons/Ionicons';
import NavigationBar from 'react-native-navbar';
import { Container, Header, Title, Button,Icon } from 'native-base';

const Tabs = React.createClass({
  tabIcons: [],

  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
  },

  componentDidMount() {
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
  },

  setAnimationValue({ value, }) {
    this.tabIcons.forEach((icon, i) => {
      const progress = (value - i >= 0 && value - i <= 1) ? value - i : 1;
    });
  },


  render() {
      return (
      <View>

      <View style={[styles.tabs, this.props.style, ]}>
        {this.props.tabs.map((tab, i,) => {
          return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
            <IconTabs
              name={tab}
              size={20}
              color={this.props.activeTab === i ?  'rgb(255,255,255)' : 'rgb(189, 224, 250)'}
              ref={(icon) => { this.tabIcons[i] = icon; }}
            />
          <Text style={{fontWeight:'bold', fontSize:10, color:this.props.activeTab === i ? 'rgb(255,255,255)' : 'rgb(189, 224, 250)'}}>{`${this.props.name[i]}`}</Text>
          </TouchableOpacity>;
        })}
      </View>
      </View>
    );
    },
  });

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: {
    height: 50,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 0,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    backgroundColor: '#2196F3',
  },
});

export default Tabs;

并在您的视图中使用此组件，如下所示。

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,Navigator
} from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';


import Tabs from './tabs';

export default class LeavesTab extends Component{

  constructor(props) {
    super(props);

  }


  _navigate(name) {
    this.props.navigator.push({
      name: name,
      passProps: {
        name: name
      }
    })
  }

  render() {
    let Tabname = ["Tab1","Tab2","Tab3","Tab4"];
    return (
          <ScrollableTabView
          initialPage={this.props.index}
          renderTabBar={() => <Tabs name={Tabname} navigator={this.props.navigator} showHeader={true} />}
          >
          <ScrollView tabLabel="md-calendar">
            <Requests tabLabel='Requests' navigator={this.props.navigator} />
          </ScrollView>
          <ScrollView tabLabel="md-checkbox">
            <LeaveList tabLabel='Approved' navigator={this.props.navigator} />
          </ScrollView>
          <ScrollView tabLabel="md-time">
            <LeaveList tabLabel='Pending' navigator={this.props.navigator} />
          </ScrollView>
          <ScrollView tabLabel="md-close-circle">
            <LeaveList tabLabel='Rejected' navigator={this.props.navigator} />
          </ScrollView>
        </ScrollableTabView>

  );
  }
}

const styles = StyleSheet.create({
});

Answer 2

Santosh's 答案是正确的，但我找到了一种基于 Native Base 选项卡的更清晰的实现方式。

渲染选项卡组件是必要的，就像在 Santosh 的示例中一样。

但是在组件中，我可以使用 React Native 的 Tabs 组件来代替 ScrollableTabView。一个例子：

export default class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>Header</Title>
        </Header>

        <Content>
          <Tabs renderTabBar={() => <TabBar />}>
            <One tabLabel="video-camera" />
            <Two tabLabel="users" />
          </Tabs>

        </Content>

        <Footer>
          <FooterTab>
            <Button transparent>
              <Icon name="ios-call" />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

编辑 @KumarSanketSahu 说 2.0 版具有更改选项卡中图标的功能。我上面的回答是针对版本 0.5.x.

Answer 3

使用 NativeBase 2.0 及更高版本，您可以使用标题内的 TabHeading 标签向选项卡添加图标属性。

<Content>
    <Tabs>
        <Tab heading={<TabHeading><Icon name='settings'/></TabHeading>}>
        <Tab heading={<TabHeading><Icon name='home'/></TabHeading>}>
     </Tabs>
</Content>

是否可以将图标添加到 Native Base 选项卡？

Is it possible to add icons to Native Base tabs?

react-native

native-base