是否可以将图标添加到本机基础选项卡

Question

Native Base 文档仅显示如何更改背景颜色、文本颜色和字体大小。但是似乎无法向选项卡添加图标。

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

谢谢。

Answer 1

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

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

Answer 2

你需要实现自己。我已经实现了此功能。请看看这是否会对您有所帮助。

创建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 3

Santosh 的回答是正确的，但我找到了一种基于本机基础选项卡的更简洁的实现方法。

渲染选项卡组件是必需的，如 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 版的。