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

Question

Native Base文档仅显示如何更改背景颜色、文本颜色和字体大小。但似乎不可能将图标添加到选项卡。

有可能还是我需要自己分叉和实施？

谢谢你。

Answer 1

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

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

Answer 2

Santosh 的回答是正确的，但我找到了一种基于 Native Base 选项卡的更简洁的方法来实现这一点。

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

但是在组件中ScrollableTabView，我可以使用 React Native 的组件，而不是使用Tabs. 一个例子：

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

您需要自己实施。我已经实现了这个功能。请看看这是否对您有帮助。

创造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({
});