是否可以在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＆＃39; 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> ); } } 。一个例子：

comPortComboBox.setModel(new javax.swing.DefaultComboBoxModel<>(new String[] 
      { "Item 1", "Item 2", "Item 3", "Item 4" }));

修改 @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>